Question

Maybe it’s a silly question, but I’m sure it will be useful for many of beginners. I have constructed a code. What I’m trying to do is to display the text (in <p> tags) which is currently hidden, only when the actual <a> is hovered. Is this possible without js? Can it be done by operating on css / html only?
the html code is here:

                <div class="promo2">
                    <a href="speakers-hire.html">
                        <div class="promo2a">
                            <p>SPEAKERS</p>
                        </div>
                    </a>

                    <a href="decks-hire.html">
                         <div class="promo2a">
                            <p>CD PLAYERS</p>
                        </div>
                    </a>

                </div> 

and the css which correspond to the above html:

.promo2a:hover{
background:url(../_images/generic/glass5.png);
display:inline-block;

}

.promo2a p{
display:none;

}

So basically I want the text in <p> to be displayed when the whole div promo2a is hovered.

Any help is kindly appreciated. Thank you in advance.

Answer 1

Try

.promo2a:hover > p {display:block;}

or whatever suits your needs