子菜单边框调用onmouseout事件

时间:2010-04-22 10:10:08

标签: javascript html css xhtml

我创建了一个简单的菜单和带有标签的子菜单(不允许使用ul元素)。要访问子菜单,用户将鼠标悬停在菜单项上。我使用onmouseover和onmouseout事件来显示或隐藏子菜单,具体取决于选择的项目。 管道(|)用于分隔每个子菜单项,这就是导致我出现问题的原因。

当用户将鼠标悬停在竖线字符上方时,subMenu div会调用onmouseout事件,这不是我想要的。所以我在管道字符周围添加了填充和减去边距,以便管道字符和其他元素之间没有间隙。

这适用于包括IE8在内的所有浏览器。但是在IE7中(我还没有测试IE6)当我触摸管道字符span元素的左边框或右边框的顶部位时,子菜单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;}

1 个答案:

答案 0 :(得分:0)

作为评论可能会更好,但我还没有这个特权。 : - /

我的第一个想法是尝试z-index。如果这不起作用,那么使用border-left或right呢?

如果没有别的,我会使用背景图片。哎呀,无论如何,你可以看到更好看的管道!

哈哈,我只想到了一个绝对可怕的解决方案。使用:带有内容的伪类:“|”; IE 7及以下版本不支持:之后,但我们无论如何都不关心它们吧?大声笑。