Hover on div but exclude one child div?

Hi,

I want to trigger an event when hovering an ul, but i want to exclude the child

  • with the class .current-menu-item from this, but I don’t know how?

    I tried this, but not working:

    $(' ul').not('.current-menu-item').hover(function(){
      $('.current-menu-item .arrow').fadeToggle(300);
    });
    
  • Can you provide the markup for the list?

    yeah sure

    <ul>
        <li>
          <a></a>
          <div class="arrow"></div>
        </li>
        <li class="current-menu-item">
          <a></a>
          <div class="arrow"></div>
        </li>
        <li>
          <a></a>
          <div class="arrow"></div>
        </li>
    </ul>
    

    its a wordpress menu and the .current-menu-item gets assigned to the current page link.

    The ul does not have a class of current-item but the list does. Wouldn’t it be this:

    $('li').not('.current-menu-item').hover(function(){
      $(this).find('.arrow').fadeToggle(300);
    });
    

    Unless you meant you wanted to fade all the arrow divs at the same time when hovering the ul?

    As an aside you can do something similar in CSS for IE10+ if all you are doing is changing color on hover.

    li:not(.current-menu-item):hover .arrow{
    background:blue;
    transition:background 1s ease;	
    }
    
    1 Like

    ye, i did a similair solution however, but when do that, everytime i leave one <li> and hover another , .current-menu-item .arrow fadetoggles quickly. Thats why i want to make its so the whole ul except the li with .current-menu-item fires that event. Maby its hard to picture what i mean but for this reason i want to fire this when hovering the ul but exclude .current-menu-item from this, rather then when hovering each li.

    I’m not quite grasping what you want :smile:

    Here’s a working demo of your html with the code I suggested.

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
    ul {
    	margin:0;
    	padding:0;
    	list-style:none;
    }
    a {
    	float:left;
    }
    .arrow {
    	background:red;
    	width:20px;
    	height:20px;
    }
    li {
    	position:relative;
    	float:left;
    	margin:0 100px 0 0;
    	padding:2px 50px 2px 0;
    	border:1px solid #000;
    }
    .arrow {
    	position:absolute;
    	right:2px;
    	top:1px;
    }
    </style>
    </head>
    
    <body>
    <ul>
    		<li> <a href="#">test1</a>
    				<div class="arrow"></div>
    		</li>
    		<li class="current-menu-item"> 
             <a href="#">test2</a>
    				<div class="arrow"></div>
    		</li>
    		<li> <a href="#">test3</a>
    				<div class="arrow"></div>
    		</li>
    </ul>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script>
    $('li').hover(function(){
      $(this).not('.current-menu-item').find('.arrow').fadeToggle(300);
    });
    </script>
    </body>
    </html>
    

    Only the item you hover toggles unless its the current item and then it does nothing.

    Perhaps you can explain what else you want to happen from this demo and then we may get a btter idea of what you want :smile:

    I will try to do a fiddle or something to show u “the problem” =)

    Here we go http://jsfiddle.net/4nkkxgza/9/ =)

    If you slowly move the cursor from li to li you will that the arrow on .current-menu-item “blinks” and this is what I want to avoid. I want it to fadetoggle when hovering other links but without the “blink”.

    Personally I would always keep the active state of a link even when hovering other links, but so is not the wish of this customer:P

    Just add a stop in the middle:

    $('.current-menu-item .arrow').stop().fadeToggle(300);

    Or without JS :smile:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
    ul {
    	list-style: none;
    }
    li {
    	display: block;
    	float: left;
    	position: relative;
    }
    a {
    	display: block;
    	padding: 10px 20px;
    	background: #eee;
    	text-decoration: none;
    	color: #000;
    	float:left;
    }
    .arrow {
    	position: absolute;
    	width: 0;
    	height: 0;
    	left: 50%;
    	bottom: 0;
    	margin-left: -8px;
    	border-left: 8px solid transparent;
    	border-right: 8px solid transparent;
    	border-bottom: 8px solid red;
    	z-index: 1;
    	opacity:0;
    	transition:opacity .5s ease;
    }
    .current-menu-item .arrow {
    	opacity:1;
    }
    ul:hover li .arrow{opacity:0}
    ul:hover li:hover .arrow{opacity:1}
    </style>
    </head>
    
    <body>
    <ul>
    		<li class="current-menu-item"> <a href="#">link</a>
    				<div class="arrow"></div>
    		</li>
    		<li> <a href="#">link</a>
    				<div class="arrow"></div>
    		</li>
    		<li> <a href="#">link</a>
    				<div class="arrow"></div>
    		</li>
    </ul>
    </body>
    </html>
    

    thanks man worked fine=)

    This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.