为什么菜单背景颜色没有改变? [英] Why doesn't the menu background color change?

查看：33
本文介绍了为什么菜单背景颜色没有改变?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我创建了 2 个菜单:prod &prod2，我发现当鼠标聚焦在prod2上时，背景颜色发生了变化，但是当鼠标聚焦在prod1上时，背景颜色没有改变.

为什么它没有改变?

样式:

ul.hMenu {边距:0；填充:0；z-索引:1；}ul.hMenu >李{边距:0；填充:0；列表样式:无；向左飘浮;宽度:140px；}ul.hMenu li a {显示:块；文本对齐:左；文字装饰:无}ul.hMenu li >div {位置:绝对；显示:无；}ul.hMenu div a {背景:黄色；}div.lay1{ 浮动:左；}div.lay1 br{行高:50%}.topMenu{font:bold 12px arial;color:#169e39;text-decoration: none;}.secondMenu{font:12px arial;color:#000000;text-decoration: none;}.arrow_box {位置:相对；背景:红色；边框:4px 实心 #c2e1f5;}.arrow_box:after, .arrow_box:before {底部:100%；边框:实心透明；内容: " ";高度:0；宽度:0；位置:绝对；指针事件:无；}.arrow_box:在{之后边框颜色:rgba(149, 213, 53, 0);边框底色:红色；边框宽度:13px；左:10%；左边距:-13px；}.arrow_box:之前{边框颜色:rgba(194, 225, 245, 0);边框底部颜色:#c2e1f5；边框宽度:19px；左:10%；左边距:-19px；}

脚本:

function showMenu(obj){var a=obj.children[0];a.style.color="蓝色";var div = obj.children[1];obj.style.backgroundColor="黄色";div.style.display="块";}函数隐藏菜单(对象){var a=obj.children[0];a.style.color="红色";var div = obj.children[1];div.style.display="无";obj.style.backgroundColor="";}

HTML: 

    <li onmouseover="showMenu(this);"onmouseout="hideMenu(this);"><a style="颜色:红色;"href="javascript:void(0);">prod</a><div><br/><!-- 这里--><div class="arrow_box" ><div class="lay1"><div><a href="" class="topMenu">管理内容</a><br><a href="" class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;消息</a></div><br><br><div><a href="" class="topMenu">管理分配</a><br><a href="" class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;用户查询</a></div>

<li onmouseover="showMenu(this);"onmouseout="hideMenu(this);"><a style="颜色:红色;"href="javascript:void(0);">prod2</a><div class="arrow_box"><div class="lay1"><div><a href="" class="topMenu">管理内容</a><br><a href="" class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;消息 </a><br><a href="" class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;帮助 <;/a></div><br><br><div><a href="" class="topMenu">管理分配</a><br><a href="" class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;用户查询</a></div>

<br/><br/><br/><br/><br/>测试

JsFiddle 中的问题

解决方案

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

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

某些浏览器与 element.style

不兼容

I have created 2 menus:prod & prod2, I find when the mouse focus on prod2, the background color is changed but when the mouse focus on prod1 the background color doesn't change.

Why it doesn't change?

Styles:

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;
}

Script:

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

解决方案

I tested your code and it worked! what is your browser? please place a demo and also add this code as well

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

some browsers have incompatibility with element.style

这篇关于为什么菜单背景颜色没有改变?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆