[Pure CSS] Is this even possible using selectors?

Hi everyone,

I’ve been working at this for a while now and it’s time to get some help :nono:

I’m building a sort of navigation with pure CSS and CSS3. My problem has to do with CSS selectors.

I need to show an image that is behind two other elements when hovering over a menu <li> that is above those two elements. (Simply using z-index doesn’t work)

Now I can use selectors like

 ul.menuBuild li .img1{display:none;}
	
	ul.menuBuild li:hover + .img1{display:block;}

to show the image but that only works if the image is a child of the hovered element. I need to select and element that is not a child of the hovered element.

Here is my HTML:

<body>
<div id="menu-wrap">
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<div class="wrap4"> 
<span class="img1"><img class="orbit orbit-frame" src="images/card08.jpg" alt="card08" /></span>
<div class="completer"></div>
<div class="completer2"></div>
<div class="wrap5">
<div class="nav-holder">

<!-- start menu !-->

<ul class="menuBuild">

  <li id="menu1"><a href="#">Lips</a>
    <ul class="submenu sub1">
      <li class="first"><a href="cat.html">Cat</a></li>
      <li class="second"><a href="rabbit.html">Rabbit</a></li>
      <li><a href="dingo.html">Dingo</a></li>
      <li class="third"><a href="cat.html">Cat</a></li>
      <li class="last"><a href="dingo.html">Dingo</a></li>
    </ul>
  </li>
  
  <li id="menu2"><a href="#">Ears</a>
    <ul class="submenu sub2">
      <li class="first"><a href="monkey.html">Monkey</a></li>
      <li class="second"><a href="dog.html">Dog</a></li>
    </ul>
  </li>
  
  <li id="menu3"><a href="#">Eyes</a>
    <ul class="submenu sub3">
      <li class="first"><a href="pig.html">Pig</a></li>
      <li class="second"><a href="bird.html">Bird</a></li>
      <li><a href="worm.html">Worm</a></li>
    </ul>
  </li>
  
  <li id="menu4"><a href="accessibleLink.html">Noses</a>
    <ul class="submenu sub4">
      <li class="first"><a href="bat.html">Bat</a></li>
      <li class="second"><a href="fish.html">Fish</a></li>
      <li><a href="panther.html">Panther</a></li>
    </ul>
  </li>
  
</ul>

<!-- end menu !-->

</div><!-- nav holder !-->
</div><!-- wrap5 !-->
</div><!-- wrap4 !-->
</div><!-- wrap3 !-->
</div><!-- wrap2 !-->
</div><!-- wrap1 !-->
</div><!-- menu-wrap !-->


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</body>

The image MUST stay between the wrap 4 and completer divs.

The menu MUST stay under the nav-holder div.

I hope I’ve explained my okay. Thanks a bunch :eye:

Hi,

As the image you want to target is above the list elements in the html then it cannot be done because selectors cannot traverse upwards. You would need js for this.

If the image was in a following sibling element then you could use the adjacent selector to target it as long as it was lower in the html. li:hover + li + li .img1 {etc…}
(or nth-child, nth-of type etc).

You’ll need to find an alternative way to do what you want or modify the code accordingly (assuming I understood correctly).

Thanks for that

I’ve tried to rearrange the code many different ways and nothing lines up the way it needs to with the image being a sibling of li.menu1 because that’s the hover element so therefore the only way to even use z-index to put the image behind where i need to put it is to use z-index on the whole menu as it won’t work on just the image if it’s inside the menu.

If i do that to the whole menu then everything’s fine except that the hover child is now behind everything and the sub-menu items are on the other side of the menu holder. The main menu and sub-menu items are on opposite sides of a nav wheel i made so you can’t take your mouse away from the main menu item because like i said, the sub-menu hover element is behind other objects.

Do you have a link to the page as it may help to visualise what you need? Or perhaps there may be an alternative way of doing it. It doesn’t sound possible from what you’ve said but I like to see the whole thing first.

Ya I’m building a product so it’s on my local system. I’ve decided to make two versions, one pure css and one javascript which of course i got everything to work the way i need using jquery.