*(Previous version had a little typo in the keyframe height. No impact,
but fixed in this iteration.)*
And a "hover-over, wee delay before display of details" version:
```
<style>
.ch1 peekaboo {display:none;}
.ch1:hover {background-color:#F5F5F5;border:1px solid gray;}
.ch1:hover peekaboo {display:block;}
.slow {
animation-name: example;
animation-duration: 5s;}
@keyframes example {
0% {height:0px;}
20% {height:0px;}
100% {height:100px;}
}
</style>
<$list filter="[tag[Articles]]">
<div class="ch1">
{{!!title}}<br>
<peekaboo class="slow" style="max-height:100px;overflow:auto;">
<$transclude mode="block">
</div>
</div>
</$list>
```
On Thursday, June 29, 2023 at 9:35:10 AM UTC-3 Charlie Veniot wrote:
> Give this sloooooooow crawl a spin:
>
> ```
> <style>
> .ch1 peekaboo {display:none;}
>
> .ch1:hover {background-color:#F5F5F5;border:1px solid gray;}
> .ch1:hover peekaboo {display:block;}
> .slow {
> animation-name: example;
> animation-duration: 5s;}
> @keyframes example {
> 0% {height:0px;}
> 100% {height:150px;}
>
> }
> </style>
>
> <$list filter="[tag[Articles]]">
> <div class="ch1">
> {{!!title}}<br>
> <peekaboo class="slow" style="max-height:100px;overflow:auto;">
>
> <$transclude mode="block">
> </div>
> </div>
> </$list>
> ```
>
> On Thursday, June 29, 2023 at 4:06:56 AM UTC-3 S² wrote:
>
>> Hi Charlie,
>> how do I get a delay of eg. 2sec to display the details when hover the
>> title?
>>
>> (didn't succed with transition-delay: 2s;)
>>
>> Thanks,
>> Stefan
>>
>> Charlie Veniot schrieb am Donnerstag, 29. Juni 2023 um 06:12:50 UTC+2:
>>
>>> Nothing revolutionary here. Just the result of some goofing around with
>>> CSS.
>>>
>>> Give it a spin at TiddlyWiki.com.
>>>
>>> ````
>>> <style>
>>> .ch1 div {display:none;}
>>> .ch1:hover {background-color:#F5F5F5;border:1px solid gray;}
>>> .ch1:hover div {display:block;}
>>> </style>
>>>
>>> <$list filter="[tag[Articles]]">
>>> <div class="ch1">
>>> {{!!title}}<br>
>>> <div style="max-height:100px;overflow:auto;">
>>> <$transclude mode="block">
>>> </div>
>>> </div>
>>> </$list>
>>> ```
>>>
>>
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/c222b07e-d9d4-4fd5-8f36-0147fea8e57dn%40googlegroups.com.
