CSS Change on hover other element not working

Question

I am trying to display sub-menu items and a div at the same time in Wordpress Genesis. But when I hover on the div the sub-menu disappear.

I am using the following code but it doesn't work

.sbclass:hover + #nav li:nth-child(3):hover ul, 
#nav li:nth-child(3) ul, 
#nav li:nth-child(3).sfHover ul, 
#nav li:nth-child(3) .submenu {
    visibility:visible !important;
    display:block !important;
}

You can check the third nav menu item menu here

http://174.120.233.154/~a348/nextmktg/jle/

Your code implies that `.sbclass` is a *sibling* of `#nav`. So how can a user possibly hover over both elements at once? — Blazemonger, Apr 17 '13 at 14:53
What browser are you in? the :nth-child option only works in modern browsers. — Jason Lydon, Apr 17 '13 at 14:53
the buttons itself are not build properly, i have to hover just above the text. show us a fiddle please :) — DiederikEEn, Apr 17 '13 at 14:54
@Blazemonger is there any other way to achieve the desired output? — David, Apr 17 '13 at 15:08
Yeah, I think @Blazemonger is right. You have two hover events fighting each other. Just make the hover happen on the `li:hover`. Or on `mouseenter`, add a class and remove the class on `mouseleave`. But either way, make the parent be responsibly for the hover event. — Jason Lydon, Apr 17 '13 at 15:43
@JasonLydon Thank you mate can you please tell me how mouse enter and mouse leave will work with the class? — David, Apr 17 '13 at 16:08

score -1 · Accepted Answer · edited May 23 '17 at 12:04

-1

** The original post ended with the poster asking how to approach his problem with mouseenter/mouseleave, that is why this a javascript response to his css question **

Welp, your using jquery, so the most basic approach is below. There are prettier ways to do it as well.

$('selector').on('mouseenter', function(){
  $(this).addClass('open');
});
$('selector').on('mouseleave', function(){
  $(this).removeClass('open');
});

More here: Combining jquery functions - on() hover/mouseenter/mouseleave
And here: http://api.jquery.com/on/

edited May 23 '17 at 12:04

Community

1
1

answered Apr 17 '13 at 16:34

Jason Lydon

7,074
1
35
43

Why are you suggesting a Javascript solution to a pure CSS problem? Whilst sometimes valid, you'd need very good reason to, which I don't see in this case. – Niels Keurentjes Apr 17 '13 at 16:36
@Niels do you have any solution using pure CSS? – David Apr 17 '13 at 17:07
@user2291220 Yes, Billy Matthews already suggested the right answer - you need a common parent to make this work. I'm willing to look at a practical implementation if I have a base JSfiddle to work from. – Niels Keurentjes Apr 17 '13 at 18:22
@JasonLydon my confusion arises from the fact that I, nor many people after me, will read all those comments before scrolling to the answer. The given answer does not support the original question, so one of the two or both need some rewriting to explain how you came from A to B. I'll remove the downvote though since it is on topic after all, my apologies (can't remove it now because of time since last edit). – Niels Keurentjes Apr 17 '13 at 18:24

CSS Change on hover other element not working

1 Answers1