Jump to content

How do you do this CSS selection?

Recommended Posts

I am in the process of getting rid of all my ids and switching to classes.

But I am now having trouble getting my popup menu working again.

When the mouse hovers over the <a></a> element in blue, I want to select the <div></div> element in green.


But this CSS code does not work


li > a:hover div{....}

li > a:hover + div{....}


So what is the correct way to select this element?


I also wish to select this element


<div class="NavSubMenuBalloon">

<div class="navigation">    <ul class="NavMenu">        <li class="NavMenuItem"><a href="index.php">Home</a></li>        <li class="NavMenuItem"><a href="CompanyProfile.php">Company Profile</a></li>        <li class="NavMenuItem"><a href="Store.php">Store</a><div class="NavSubMenuArrow">▸</div>              <div class="NavSubMenuBalloon">                  <div class="NavBalloonArrow"></div>                  <ul class="NavSubMenu">                    <li class="NavMenuItem"><a href="Category1.php">Comparators</a></li>                    <li class="NavMenuItem"><a href="Category2.php">LDR</a></li>                    <li class="NavMenuItem"><a href="Category3.php">LED</a></li>                    <li class="NavMenuItem"><a href="Category4.php">Operational Amplifiers</a></li>                    <li class="NavMenuItem"><a href="Category5.php">Phototransistor</a></li>                    <li class="NavMenuItem"><a href="Category6.php">Potentiometer</a></li>                    <li class="NavMenuItem"><a href="Category7.php">Rectifier Diodes</a></li>                    <li class="NavMenuItem"><a href="Category8.php">Resistor</a></li>                    <li class="NavMenuItem"><a href="Category9.php">Schottky Diodes</a></li>                    <li class="NavMenuItem"><a href="Category10.php">Transitors NPN</a></li>                    <li class="NavMenuItem"><a href="Category11.php">Transistors PNP</a></li>                    <li class="NavMenuItem"><a href="Category12.php">Zener Diodes</a></li>                </ul>            </div>        </li>    </ul>                     <div class="NavImage">        <img width="100%" alt="Navigation image 1" src="images/NavigationImage1.jpg" />    </div>    <div class="NavImage">        <img width="100%" alt="Navigation image 2" src="images/NavigationImage2.jpg" />    </div></div>
Link to post
Share on other sites

li > a:hover div{....} will select div child of anchor which it does not have

li > a:hover + div{....} will select first direct sibling div (NavSubMenuArrow) element following anchor


you could use

li > a:hover + div + div

li > a:hover ~ div.NavSubMenuBalloon

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...