鼠标悬停时显示效果并在鼠标悬停时显示隐藏效果，如何？

所以我的问题在这里它的效果通过鼠标悬停在鼠标悬停后激活...任何人都可以告诉我如何变换js使鼠标离开菜单时不受影响的效果？鼠标悬停时显示效果并在鼠标悬停时显示隐藏效果，如何？

谢谢

<script> 
 
    (function() { 
 
    [].slice.call(document.querySelectorAll('.menu')).forEach(function(menu) { 
 
     var menuItems = menu.querySelectorAll('.menu__link'), 
 
     setCurrent = function(ev) { 
 
     ev.preventDefault(); 
 

 
        var item = ev.target.parentNode; // li 
 

 
        // return if already current 
 
        if (classie.has(item, 'menu__item--current')) { 
 
        return false; 
 
        } 
 
        // remove current 
 
        classie.remove(menu.querySelector('.menu__item--current'), 'menu__item--current'); 
 
        // set current 
 
        classie.add(item, 'menu__item--current'); 
 
       }; 
 

 
       [].slice.call(menuItems).forEach(function(el) { 
 
        el.addEventListener('mouseover', setCurrent); 
 
       }); 
 
       }); 
 

 
    [].slice.call(document.querySelectorAll('.link-copy')).forEach(function(link) { 
 
     link.setAttribute('data-clipboard-text', location.protocol + '//' + location.host + location.pathname + '#' + link.parentNode.id); 
 
     new Clipboard(link); 
 
     link.addEventListener('mouseover', function() { 
 
     classie.add(link, 'link-copy--animate'); 
 
     setTimeout(function() { 
 
      classie.remove(link, 'link-copy--animate'); 
 
     }, 300); 
 
     }); 
 
    }); 
 
    })(window); 
 
    </script>

<section class="section section--menu" id="maria"> 
 
     <nav class="menu menu--maria"> 
 
      <ul class="right hide-on-med-and-down menu__list"> 
 
      <li class="indigo-text menu__item menu__item--current"><a href="#" class="menu__link">Illustration</a> 
 
      </li> 
 
      <li class="indigo-text menu__item"><a href="#" class="menu__link">Edition</a></li> 
 
      <li class="indigo-text menu__item"><a href="#" class="menu__link">Graphisme</a></li> 
 
      <li class="indigo-text menu__item"><a href="#" class="menu__link">Contact</a></li> 
 
      </ul> 
 
     </nav> 
 
     </section>

来源

2016-01-20 Stephane Stadler

你想显示整个列表时，鼠标悬停它并隐藏整个列表，当鼠标不在列表中时... ...准确地描述你想要发生的事情：D – repzero

@repzero我希望当我悬停一个链接时有效并在鼠标不在菜单链接时处于非活动状态，现在，如果我将鼠标悬停在例如链接“插图”上，并且如果我将鼠标移出任何链接，效果将停留在“插图”上，即使我将鼠标移出... –

我假设你想这样的事情。

如果需要取出边境（这只是一个方法）

摘录如下

all_li=document.getElementsByClassName('indigo-text menu__item'); 
 
function mouseover(el){ 
 
all_li[el].addEventListener('mouseover', function(){ 
 
\t this.children[0].classList.remove('disable'); 
 
\t this.children[0].classList.add('enable'); 
 

 
} 
 
,false) 
 
all_li[el].addEventListener('mouseout', function(){ 
 
\t this.children[0].classList.remove('enable'); 
 
\t this.children[0].classList.add('disable'); 
 

 
} 
 
,false) 
 
} //end of function 
 
for(i=0;i<all_li.length;++i){ 
 
mouseover(i) 
 

 
}

a { 
 
pointer-events:none; 
 
text-decoration:none; 
 
color:grey; 
 
} 
 
.disable { 
 
pointer-events:none; 
 
text-decoration:none; 
 
color:grey; 
 
} 
 
.enable { 
 
pointer-events:auto; 
 
text-decoration: underline; 
 
color:black; 
 
} 
 
ul{ 
 
    border:solid; 
 
    display:inline-block; 
 
}

<section class="section section--menu" id="maria"> 
 
     <nav class="menu menu--maria"> 
 
      <ul class="right hide-on-med-and-down menu__list"> 
 
      <li class="indigo-text menu__item menu__item--current"><a href="#" class="menu__link">Illustration</a> 
 
      </li> 
 
      <li class="indigo-text menu__item"><a href="#" class="menu__link">Edition</a></li> 
 
      <li class="indigo-text menu__item"><a href="#" class="menu__link">Graphisme</a></li> 
 
      <li class="indigo-text menu__item"><a href="#" class="menu__link">Contact</a></li> 
 
      </ul> 
 
     </nav> 
 
     </section>

来源

2016-01-21 21:59:00 repzero

thx很多我会用这个:) –

欢迎....... D – repzero

鼠标悬停时显示效果并在鼠标悬停时显示隐藏效果，如何？

回答

相关问题