为什么菜单背景颜色没有变化？答案

【问题标题】：Why doesn't the menu background color change?为什么菜单背景颜色没有变化？
【发布时间】：2013-10-10 05:24:20
【问题描述】：

我已经创建了2 menus:prod & prod2，我发现mouse focus on prod2的时候，背景颜色变了但是当鼠标聚焦在prod1 the background color doesn't change上的时候。

为什么不改变？

样式：

ul.hMenu  { 
    margin: 0;
    padding: 0; 
    z-index: 1;                 
}
ul.hMenu > li  {  
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    width:140px;
}
ul.hMenu li a { 
    display: block; 
    text-align: left;
    text-decoration: none
}          
ul.hMenu li > div  {                    
    position: absolute;             
    display: none;                
}
ul.hMenu div a {background: yellow;     
}           

div.lay1{ float:left;}  
div.lay1 br{line-height:50%}
.topMenu{font:bold 12px arial;color:#169e39;text-decoration: none;}
.secondMenu{font:12px arial;color:#000000;text-decoration: none;}
.arrow_box {
    position: relative;
    background: red;
    border: 4px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.arrow_box:after {
    border-color: rgba(149, 213, 53, 0);
    border-bottom-color: red;
    border-width: 13px;
    left: 10%;
    margin-left: -13px;
}
.arrow_box:before {
    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: #c2e1f5;
    border-width: 19px;
    left: 10%;
    margin-left: -19px;
}

脚本：

function showMenu(obj){             
    var a=obj.children[0];
    a.style.color="blue";
    var div = obj.children[1];
    obj.style.backgroundColor="yellow";


    div.style.display="block";  

}
function hideMenu(obj){
    var a=obj.children[0];
    a.style.color="red";
    var div = obj.children[1];          
    div.style.display="none";
    obj.style.backgroundColor="";
}

HTML：

<ul class="hMenu">          
    <li  onmouseover="showMenu(this);" onmouseout="hideMenu(this);">
        <a style="color: red;" href="javascript:void(0);">prod</a>              
        <div><br/> 
            <!-- here-->
            <div class="arrow_box" >  
                <div class="lay1">
                   <div><a href=""  class="topMenu">Manage Content</a><br><a href=""  class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;Message </a></div>
                   <br><br>
                   <div><a href=""  class="topMenu">Manage Assignment</a><br><a href=""  class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;User Inquiry</a></div>
                </div>
            </div>
        </div>
    </li>     
    <li onmouseover="showMenu(this);" onmouseout="hideMenu(this);">
        <a style="color: red;" href="javascript:void(0);">prod2</a>
        <div  class="arrow_box">                                               
            <div  class="lay1">
                <div><a href=""  class="topMenu">Manage Content</a><br><a href=""  class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;Message </a><br><a href=""  class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;Help </a></div>
                <br><br>
                <div><a href=""  class="topMenu">Manage Assignment</a><br><a href=""  class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;User Inquiry</a></div>
            </div>
        </div>
    </li>  
</ul>   
<br/><br/><br/><br/><br/>
Test

Problem In JsFiddle

【问题讨论】：

你能在这里做一个JSFIDDLE吗jsfiddle.net

标签： javascript html css web

【解决方案1】：

我测试了您的代码并且它有效！你的浏览器是什么？请放置一个演示并添加此代码

a.setAttribute('style','background-color:blue');

部分浏览器与element.style不兼容

【讨论】：

【解决方案2】：

给 CSS 像这样

.arrow_box{ position:absolute; white-space:nowrap}

检查一下

http://jsfiddle.net/zz5XJ/2/

【讨论】：

这是新菜单，我希望菜单项的背景颜色为“红色”。jsfiddle.net/sstong123/4w99b/4

【解决方案3】：

试试下面的 HTML：

            <body>          
                <ul class="hMenu">          
                    <li  onmouseover="showMenu(this);" onmouseout="hideMenu(this);">
                        <a style="color: red;" href="javascript:void(0);">prod</a>              
                             <div class="arrow_box" >  
                                <div class="lay1">
                                   <div><a href=""  class="topMenu">Manage Content</a><br><a href=""  class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;Message </a></div>
                                   <br><br>
                                   <div><a href=""  class="topMenu">Manage Assignment</a><br><a href=""  class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;User Inquiry</a></div>
                                </div>
                            </div>

                    </li>     
                    <li onmouseover="showMenu(this);" onmouseout="hideMenu(this);">
                        <a style="color: red;" href="javascript:void(0);">prod2</a>
                        <div  class="arrow_box">                                               
                            <div  class="lay1">
                                <div><a href=""  class="topMenu">Manage Content</a><br><a href=""  class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;Message </a><br><a href=""  class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;Help </a></div>
                                <br><br>
                                <div><a href=""  class="topMenu">Manage Assignment</a><br><a href=""  class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;User Inquiry</a></div>
                            </div>
                        </div>
                    </li>  
                </ul>   
                <br/><br/><br/><br/><br/>
                Test
            </body>

【讨论】：

没有改变...我希望菜单项的背景颜色为“红色”，箭头也不应覆盖菜单。 jsfiddle.net/sstong123/4w99b/4

【解决方案4】：

请检查您的 HTML：

因为您对两个 Pord or Pord2 执行相同的功能，但两个 li 的内部 html 是不同的。所以function showMenu() 对Pord or Pord2 的工作方式不同：

HTML：

<ul class="hMenu">
        <li onmouseover="showMenu(this);" onmouseout="hideMenu(this);"><a style="color: red;"
            href="javascript:void(0);">prod</a>           
            <div class="arrow_box">
             <br />
                <div class="lay1">
                    <div>
                        <a href="" class="topMenu">Manage Content</a><br>
                        <a href="" class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;Message </a>
                    </div>
                    <br />
                    <br />
                    <div>
                        <a href="" class="topMenu">Manage Assignment</a><br>
                        <a href="" class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;User Inquiry</a></div>
                </div>
            </div>
        </li>
        <li onmouseover="showMenu(this);" onmouseout="hideMenu(this);"><a style="color: red;"
            href="javascript:void(0);">prod2</a>            
            <div class="arrow_box">
            <br />
                <div class="lay1">
                    <div>
                        <a href="" class="topMenu">Manage Content</a><br>
                        <a href="" class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;Message </a>
                        <br>
                        <a href="" class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;Help </a>
                    </div>
                    <br />
                    <br />
                    <div>
                        <a href="" class="topMenu">Manage Assignment</a><br>
                        <a href="" class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;User Inquiry</a></div>
                </div>
            </div>
        </li>
    </ul>

Try This

更新

将<br /> 放在arrow_box div 之前，用于li 和一些更改为Javascript：

var div = obj.children[2];

Javascript -

   function showMenu(obj){ 
                var a=obj.children[0];
                a.style.color="blue";
                var div = obj.children[2];
                obj.style.backgroundColor="yellow";
                div.style.display="block";
            }

    function hideMenu(obj){
                var a=obj.children[0];
                a.style.color="red";
                var div = obj.children[2];          
                div.style.display="none";
                obj.style.backgroundColor="";
            }

Updated Jsfiddle

【讨论】：

我想在箭头之前添加
，而不是在箭头之后，你可以看到箭头已经覆盖了菜单。
我希望菜单背景颜色为“红色”，