鼠標懸停時顯示效果並在鼠標懸停時顯示隱藏效果，如何？

所以我的問題在這裏它的效果通過鼠標懸停在鼠標懸停後激活...任何人都可以告訴我如何變換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

鼠標懸停時顯示效果並在鼠標懸停時顯示隱藏效果，如何？

回答

相關問題