子菜單邊框調用onmouseout事件

我創建了一個帶有標籤的簡單菜單和子菜單（不允許使用ul元素）。要訪問子菜單，用戶將鼠標懸停在菜單項上。我使用onmouseover和onmouseout事件來顯示或隱藏子菜單，具體取決於選擇哪個項目。管道（|）用於分隔每個子菜單項，這是導致我出現問題的原因。子菜單邊框調用onmouseout事件

當用戶將鼠標懸停在管道字符上時，subMenu div會調用onmouseout事件，這不是我想要的。因此，我在管道字符和負邊緣周圍添加了填充，以便管道字符和其他元素之間沒有間隙。

這適用於包括IE8在內的所有瀏覽器。但是在IE7中（我還沒有測試過IE6），當我觸摸管道字符跨度元素的左邊界或右邊界的最高位時，submenu div會調用onmouseout事件。

<div id="subMenu" onmouseout="hideSubMenu()" > 
     <div id="opinionSubMenu" onmouseover="showOpinionSubMenu()"> 
      <a id="Blogs" href="HTMLNew.htm">BLOGS</a> 
      <span class="SubMenuDelimiter">|</span> 
      <a id="Comments" href="HTMLNew.htm">COMMENTS</a> 
      <span class="SubMenuDelimiter">|</span> 
      <a id="Views" href="HTMLNew.htm">VIEWS</a>     
     </div> 
     <div id="learningSubMenu" onmouseover="showLearningSubMenu()"> 
      <a id="Articles" href="HTMLNew.htm">ARTICLES</a> 
      <span class="SubMenuDelimiter">|</span> 
      <a id="CoursesCases" href="HTMLNew.htm">COURSES & CASES</a> 
      <span class="SubMenuDelimiter">|</span> 
      <a id="PracticeImpact" href="HTMLNew.htm">PRACTICE IMPACT</a>       
     </div>    
    </div>

這是我的CSS類

#subMenu{ 
padding:10px 0px; 
background-color:#F58F2D; 
font-weight:normal; 
text-decoration:none;   
font-family:Lucida Sans Unicode; 
font-size:14px;  
float:left; 
width:100%; 
display:none;} 

#Blogs, #Comments, #Views, #Articles 
{   
    padding:10px 5px; 
    background:none repeat scroll 0 0 transparent; 
    color:#000000; 
    font-weight:normal; 
    text-decoration:none; 
    border:solid 1px black;} 

#Blogs:hover, #Comments:hover, #Views:hover, #Articles:hover{ 
color:#ffffff; 
text-decoration:none;} 

.SubMenuDelimiter{ 
padding:10px 5px;  
margin:10px -5px;}

來源

2010-04-22 insanepaul

爲什麼你不能使用ul和li元素？ – Kyle 2010-04-22 10:17:44

我不知道爲什麼我不能使用這些元素。首席設計師讓我不要使用它們。也許它在Mac上不能很好地工作？ – insanepaul 2010-04-22 10:21:04

這些元素旨在使列表和菜單恰好代表了這一點，這是製作菜單的標準方式。我會和你的首席設計師交談。 – Kyle 2010-04-22 10:30:30

這可能是一個更好的評論，但我沒有的特權呢。： -/

我的第一個想法是嘗試z-index。如果這不起作用，那麼使用邊界左邊還是右邊呢？

如果沒有別的，我會使用背景圖像。哎呀，無論如何，你可以得到更好看的管子！

哈哈，我只是想到了一個絕對可怕的解決方案。使用：僞類之後的內容：「|」; IE 7及以下版本不支持：之後，但我們不關心它們吧？大聲笑。

來源

2011-09-16 23:48:58

子菜單邊框調用onmouseout事件

回答

相關問題