I love how compact this code is, and how it relies on nothing other than
css!
Some kind of visible "affordance-cue" seems needed, to invite the hovering.
Very slightly tweaked (without any delay), I like:
```
<style>
.pop div {display:none; ; background-color:#ffd;}
.pop:hover {background-color:#ffa; border-right: 6px solid #ffa;}
.pop:hover div {display:block;}
</style>
<$list filter="[tag[Articles]]">
<div class="pop" style="border-top: 6px solid #ffd; border-left: 6px solid
#ffd;">
{{!!title}}
<div style="border-left:2em solid #ffa; padding-left:1em;
max-height:100px;overflow:auto;">
<$transclude mode="block">
</div></div>
</$list>
```
On Thursday, June 29, 2023 at 12:12:50 AM UTC-4 Charlie Veniot wrote:
> 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/637f5745-6eee-409a-9543-c31e22ecb3bcn%40googlegroups.com.
