手动悬停功能在javascript

我不知道什么是错误的，但悬停功能，因为我写在这里保持甚至当我没有悬停按钮。我知道有一种更简单的方式来悬停一个对象，但我正在学习基础知识，所以这将有助于弄清楚我的确切代码有什么问题。手动悬停功能在javascript

<head> 
    <style> 
    .tabStrip { 
     background-color: #E4E2D5; 
     padding: 15px; 
     height: 22px; 
     width: 130px; 
     margin: auto; 
    } 

    .tabStrip div { 
     float: left; 
     font: 14px arial; 
     cursor: pointer; 
    } 

    .tabStrip-tab { 
     padding: 5px; 
    } 

    .tabStrip-tab-hover { 
     border: 1px solid #316AC5; 
     background-color: #C1D2EE; 
     padding: 4px; 
    } 

    .tabStrip-tab-click { 
     border: 1px solid #facc5a; 
     background-color: #f9e391; 
     padding: 4px; 
    } 
    </style> 

</head> 


<body> 

    <div class="tabStrip"> 
    <div data-tab-number="1" class="tabStrip-tab">Tab1</div> 
    <div data-tab-number="2" class="tabStrip-tab">Tab2</div> 
    <div data-tab-number="3" class="tabStrip-tab">Tab3</div> 
    </div> 

    <div id="descContainer"></div> 

    <script> 
    function handleEvent(e) { 
     var target = e.target; 
     switch (e.type) { 
     case 'mouseover': 
      if (target.className == 'tabStrip-tab') { 
      target.className = 'tabStrip-tab-hover'; 
      } 
      break; 
     case 'mouseout': 
      if (targer.className == 'tabStrip-tab-hover') { 
      targer.className = 'tabStrip-tab'; 
      } 
      break; 
     case 'click': 
      if (target.className == 'tabStrip-tab-hover') { 
      target.className = 'tabStrip-tab-click'; 
      var num = target.getAttribute('data-tab-number'); 
      showDescription(num); 
      } 
      break; 
     } 
    } 

    function showDescription(num) { 
     var descContainer = document.getElementById('descContainer') 
     var text = 'description for tab ' + num; 
     descContainer.innerHTML = text; 
    } 

    document.addEventListener('mouseover', handleEvent); 
    document.addEventListener('mouseout', handleEvent); 
    document.addEventListener('click', handleEvent); 
    </script> 

</body>

来源

2016-01-27 Mindaugas D

'target！== targer' – Teemu

这个问题似乎是你拼错的目标为targer在JavaScript

正确：

function handleEvent(e) { 
    var target = e.target; 
    switch (e.type) { 
    case 'mouseover': 
     if (target.className == 'tabStrip-tab') { 
     target.className = 'tabStrip-tab-hover'; 
     } 
     break; 
    case 'mouseout': 
     if (target.className == 'tabStrip-tab-hover') { 
     target.className = 'tabStrip-tab'; 
     } 
     break; 
    case 'click': 
     if (target.className == 'tabStrip-tab-hover') { 
     target.className = 'tabStrip-tab-click'; 
     var num = target.getAttribute('data-tab-number'); 
     showDescription(num); 
     } 
     break; 
    } 
}

Codepen of it working correctly

来源

2016-01-27 15:47:03

你的拼写是mouseout事件不正确。它是targer而不是`目标。

case 'mouseout': 
    if (target.className == 'tabStrip-tab-hover') { 
     target.className = 'tabStrip-tab'; 
    } 
    break;

来源

2016-01-27 15:49:28 Hook

手动悬停功能在javascript

回答

相关问题