CSS show on hover

by John Schulz

HTML

<p>The text here ---&gt; <span class='flicker'>(right here)</span> &lt;--- 
    should be visible when the mouse is over it but it is not.</p>

<p>The text here ---&gt; 
    <span class='make-visible'>
        <span class='semi-visible'>(right here)</span>
    </span> &lt;--- is visible when the mouse is over it.</p>

<p class='make-visible'>The text here ---&gt; 
    <span class='semi-visible'>(right here)</span>
    &lt;--- is visible when the mouse is anywhere in the paragraph.</p>

CSS

.flicker                          { visibility: hidden; outline: 1px solid black; }
.flicker:hover                    { visibility: visible; }
/* .flicker:hover *                  { visibility: visible ! important; } */
.semi-visible                     { visibility: hidden; }
.make-visible:hover .semi-visible { visibility: visible; }