與懸停

一個朋友和我自己的IE選擇問題試圖要解決IE（7/8）。我們已經建立了一個典型的例子在這裏：與懸停

http://www.mathgladiator.com/share/ie-select-bug-hover-css-menus.htm

使用CSS菜單，我們希望有選擇在其中。但是，在IE中，當您與選擇框交互時，菜單會消失。我們認爲這與選擇如何影響事件有關。

是否有解決方法？至少在純粹的CSS或DOM黑客？

來源

2010-09-13 MathGladiator

其IE版本你正在談論？ – 2010-09-13 16:33:34

主要是7和8（*編輯*） – MathGladiator 2010-09-13 16:35:14

我看到IE7和Chrome – 2010-09-13 16:37:34

我不認爲這是一個純粹的CSS方式。這是由於IE處理select元素上的事件的一個非常常見的錯誤。

但是，您可以解決它用javascript：以上

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.nav_element a').mouseover(function() { 
      $('.submenu').hide(); 
      $(this).parent().find('.submenu').show(); 
     }); 

     $('.submenu').mouseover(function() { 
      $(this).show(); 
     }); 

     $('.submenu').mouseout(function (e) { 
      // Do not close if going over to a select element 
      if (e.target.tagName.toLowerCase() == 'select') return; 
      $(this).hide(); 
     }); 

    });  
</script>

代碼使用jQuery的。

來源

2010-09-22 00:45:16 vassilis

這裏是改良劑在IE7/8選擇的行爲方式，但它並沒有解決問題

變化DOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

添加腳本

<script> 

    function ddlOut(e) { 
     setTimeout(function() { e.className = e.className.replace(' over', ''); }, 1000) 
    } 

</script>

添加CSS

#nav .over div.submenu 
    { 
     display: block; 
    } 

    #nav .nav_element{ 
     behavior: expression(
      this.onmouseover = new Function("this.className += ' over'"), 
      this.onmouseout = new Function("ddlOut(this)"), 
      this.style.behavior = null 
     ); 
    }

它會工作得更好，至少當然不是完美的。

我的建議是將選擇控件更改爲html等效。我用OboutDropDown有一個很好的看法。有許多實現可以滿足您的需求。

來源

2010-09-24 08:03:35

首先，您需要展開菜單下方的懸停表面。
所以在你的css里加width:310px;height:220px到#nav .nav_element a。
（還添加了一個類或top:220px風格上的第二個div一個id）

現在你只需要模擬鼠標按下觸發時你點擊上的選擇將停止時的選項之間的選擇做 - 你大概可以做的最後一部分，如果你檢查的的onfocus狀態的選擇將停止mousedown的。

來源

2010-09-26 03:11:20 Knu

回答

相關問題