手動懸停功能在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

回答

相關問題