CODEWITHSUNDEEP
htmlcss
Adrian
Adrian

Reputation: 285

Display hidden div on a:hover

I have done this with menu/sub-menu but can't seem to get this working when doing it for a slightly different reason.

I have the following which is an info graphic, and a hidden div with some text in:

<div class="basictext">
<p>This package allows you to "buy" a customisable web template from us to host on your own web hosting and register your own domain name for.</p>
</div>
<li class="title basic">Basic<br/><a></a></li>

In my css, .basictext is hidden (but styled), and when .basic a is hovered .basictext should display with display:block

.basictext {display: none; height: 60px; width: 130px; border: 2px solid #1572b8; background: #fff; padding: 10px;} .basic a:hover .basictext {display: block;}

It's just not appearing at all, any help please?

Upvotes: 0

Views: 88

Answers (1)

tripleZee
tripleZee

Reputation: 458

.basic a:hover .basictext   {display: block;}

Will affect an element with 'basictext' class that's inside an a tag that's inside an element with the class 'basic'.

<div class="basictext">
    <a> <span class="basictext">Will appear when hovering</span> </a>
</div>

Your html is not structured that way, that's why the rule doesn't catch.

Upvotes: 2

Related Questions