CSS/Javascript鼠標懸停彈出框

我有一個javascript/css內容框的表格單元格，當鼠標懸停時彈出。CSS/Javascript鼠標懸停彈出框

頁面上有20個單元格。一切工作正常，當你將鼠標懸停在產品鏈接上時，你會看到內容框。但是，我想將LINK放入用戶可以點擊的內容框中，如果他們選擇的話。所以，彈出框必須保持足夠長的時間以供用戶鼠標懸停以點擊鏈接。

真的，我希望OnMouseOver保持打開狀態，直到有一秒鐘或兩秒鐘過去，或者用戶OnMouseOver的另一個單元。

我遇到的問題是彈出框不保持打開（由於OnMouseOut）點擊鏈接。如果我關閉OnMouseOut（我試過），那麼所有彈出框都保持打開狀態，所以這也不能完成這項工作。

我的CSS是這樣的：

<style type="text/css" title=""> 
    .NameHighlights   {position:relative; } 
    .NameHighlights div  {display: none;} 
    .NameHighlightsHover {position:relative;} 
    .NameHighlightsHover div {display:block;position:absolute;width: 15em;top:1.3em;*top:20px;left:70px;z-index:1000;} 
</style>

和HTML：

<td> 
    <span class="NameHighlights" onMouseOver="javascript:this.className='NameHighlightsHover'" onMouseOut="javascript:this.className='NameHighlights'"> 
    <a href="product link is here">Product 1</a> 
      <div> 
      # of Votes: 123<br> 
      % Liked<br> 
      <a href="product review link>See User reviews</a> 
      </div> 
    </span> 
</td>

那麼，如何才能讓彈出框保持打開足夠長的時間來點擊鏈接，而且還如果另一個內容框被激活，它會消失嗎？

在此先感謝。

來源

2013-03-17 Kevin

你要改善這個任務你的HTML標記，需要擺脫內聯事件處理程序：

<span class="NameHighlights"> 
    <a href="product link is here">Product 1</a> 
    <div> 
     # of Votes: 123<br> 
     % Liked<br> 
     <a href="product review link">See User reviews</a> 
    </div> 
</span>

然後你有你的事件綁定到所有.NameHighlights跨度：

var span = document.querySelectorAll('.NameHighlights'); 
for (var i = span.length; i--;) { 
    (function() { 
     var t; 
     span[i].onmouseover = function() { 
      hideAll(); 
      clearTimeout(t); 
      this.className = 'NameHighlightsHover'; 
     }; 
     span[i].onmouseout = function() { 
      var self = this; 
      t = setTimeout(function() { 
       self.className = 'NameHighlights'; 
      }, 300); 
     }; 
    })(); 
}

http://jsfiddle.net/3wyHJ/

所以的想法是使用setTimeout方法。

注：我用它不支持IE7，如果你需要支持它，那麼你可以使用任何getElementsByClassName方法的實現querySelectorAll。

來源

2013-03-17 06:14:36 dfsq

謝謝!!我今天會試試這個.... – Kevin 2013-03-18 17:18:32

如果有人正在尋找接受答案的一個jQuery版本：

var t; 
$(function(){ 
      $('span.NameHighlights').mouseover(

        function(e){ 
         hideAll(); 
         clearTimeout(t); 
         $(this).attr('class', 'NameHighlightsHover'); 

        } 
      ).mouseout(

        function(e){ 

         t = setTimeout(function() { 
         //$(this).attr('class', 'NameHighlights'); 
         hideAll(); 
         }, 300); 

        } 
      ); 
     }); 

function hideAll() { 
    $('span.NameHighlightsHover').each(function(index) { 
      console.log('insde hideAll'); 
       $(this).attr('class', 'NameHighlights'); 
      }) 
};

jsFiddle

來源

2017-03-08 21:35:26

CSS/Javascript鼠標懸停彈出框

回答

相關問題