PyLucid CMS Logo

blog CSS teaser

If you would like to add a dynamic (mouse over) teaser function for the blog article, try this stylesheet:

CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
.blog .content * {
    display: none;
}
.blog .content p:first-child {
    display: block;
}
.blog .content:hover * {
   display: block;
}
.blog .content p:first-child:after {
    content:" . . .";
    color: #555;
}
.blog .content:hover p:after { content:""; }

We should take a look on the new HTML5 tags in the future: <summary> and <details>. But currently only Chrome browser support them, yet :(

1 Kommentar für 'blog CSS teaser':
  • 1. luisa31:
    Vor 11 Monate, 2 Wochen IP: 79.8.121.106
    ok thanks
Kommentar hinterlassen
tag navi blog | pylucid

django-processinfo: 5.8 ms of 255.8 ms (2.3%)