This is also nice behavior.
But I thought when hovering the link (title) - the content will be shown
delayed (eg. 2sec) - of course with upper code. :-)
Thanks, Stefan
Charlie Veniot schrieb am Donnerstag, 29. Juni 2023 um 14:47:16 UTC+2:
> *(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/3222bfd1-ba4e-4933-bc7f-62c34653c62en%40googlegroups.com.
