0

Is it possible to affect an element that is placed within a div by hovering on an element that belongs to another div?

I can get it to work using the general sibling selector, but only when the element that I hover on isn't placed inside any other element. Is this the only way it can be done?

Edit: I didn't really want to tire you with all the details but yes, perhaps I should have included some markup in the first place. So, here it is, rather (over)simplified:

 <nav>
  <button></button>
 </nav>

<div id="sidemenu">
 <ul class="nav">
  <li>Link 1</li>
  <li>Link 2</li>
 </ul>
</div>

When on small devices, the sidemenu would be hidden and the button element would appear. Hovering on the latter would make the sidemenu reappear as a drop down menu. At least that was the idea. I don't really feel that it would be right to change the markup, so I guess I need to find another way to do this.

  • 2
    Please add your actual markup to help U ..... – DaniP Jan 26 '15 at 13:45
  • Can you post an example of the code you've tried so far please? – llanato Jan 26 '15 at 13:45
  • Yes, pretty much, since you can't traverse above the parent of an element, only across its siblings or further down the hierarchy. – BoltClock Jan 26 '15 at 13:47
  • not possible as that would require a [parent selector](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) – Pete Jan 26 '15 at 13:50
  • Thank you for your replies. I added some additional information, hoping that they are enough. –  Jan 26 '15 at 15:56

1 Answers1

1

This is not possible. You can make a child element respond to a hover on a parent, but it's not possible to make an entirely different element respond to a hover on another random element.

With CSS only that is. It is possible if you add a little javascript/jQuery. You could for instance use the hover function in jQuery.

//edited
$('button').hover(function () {
     $('#sidemenu').addClass('hover');
}, 
function () {
     $('#sidemenu').removeClass('hover');
});

What this basically does is add a class to #other-element when hovering over #element and removing the class when the hover is removed.

Edit: I updated the code to match your markup. In this case hovering over the button would add a class to the sidemenu. You could then style the sidemenu like this:

 #sidemenu
 {
 display:none;
 }

 #sidemenu.hover
 {
 display:block;
 }

This piece of css would normally hide the #sidemenu but shows it when the class hover is added to it.

Anwardo
  • 573
  • 5
  • 13
  • 1
    I upvoted this answer because I agree on it as a solution, but wanted to mention that by hovering on an element, you can affect the *child of one of its siblings* using just CSS, with a selector like `.top:hover + .bottom span`, here's a [fiddle](http://jsfiddle.net/6ch2776m/4/) – Dpeif Jan 26 '15 at 14:27
  • Thank you both for your replies. Anwardo, I don't know much about JS/JQuery but, if I understand it correctly, you mean that this snippet would add an HTML class to sidemenu? Wouldn't it still be impossible for me to use it with CSS? –  Jan 26 '15 at 16:06
  • I updated my answer, I hope this answers your question. @Dpeif you're right about using the sibling selector. I kinda read over the sibling part when reading the question first. But in this case that wouldn't apply anyway because the behaviour should only happen when hovering over a child inside the `nav` element. – Anwardo Jan 28 '15 at 14:47
  • That makes much more sense than what I initially thought (that I'd still have to reach that class using some contextual selector that can't really be used). There was just one problem, the sidemenu disappeared before I had the chance to select any of the list items but I eventually found a similar solution that eliminates this problem (just in case anyone is interested, it's: $('button.sidebutton').click(function() { $('#sidemenu').toggleClass("current"); }); ). I'll mark your answer as helpful though, after all you gave me what I asked for. Once again, thank you. –  Jan 29 '15 at 18:34