I have in a web-page repeated divs which are normally transparent, but are made opaque when the mouse hovers over their parent:
<div class="entry">
...
<div class="info">
some information text
</div>
</div>
div.info {
opacity: 0;
}
.entry:hover div.info {
opacity: 1;
}
I would now like to make that page searchable through the standard browser "find in page" functionality. That actually works, but if the found text is within such a div.info, it is obviously invisible, too.
Is there a way I can make my div visible not just on hover, but also if it contains found text? Or specify the style of found text, including that is is supposed to be visible?
I looked at the other CSS pseudo-classes, but none of them match my purpose. I also experimented with the pseudo-element ::target-text as an alternative to found text.
Do I have to do this via JavaScript?