为什么菜单背景颜色不变？ [英] Why doesn't the menu backgroud color change?
问题描述
我创建了 2菜单：prod& prod2 ，我发现当鼠标关注于prod2 时，背景颜色会改变，但当鼠标重点在 prod1上时背景颜色不会改变。
为什么它不会改变？
样式：
ul.hMenu {
保证金：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：相对的;
背景：红色;
border：4px solid＃c2e1f5;
}
.arrow_box：之后，.arrow_box：之前{
bottom：100％;
border：固体透明;
content：;
height：0;
width：0;
位置：绝对;
pointer-events：none;
}
.arrow_box：在{
border-color：rgba（149,213,53,0）后面;
border-bottom-color：red;
border-width：13px;还剩
：10％;
margin-left：-13px;
}
.arrow_box：在{
border-color：rgba（194,225,245，0）之前;
border-bottom-color：＃c2e1f5;
border-width：19px;还剩
：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（本）; >
< a style =color：red; HREF = JavaScript的：无效（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>
< / div>
< / div>
< / div>
< / li>
< li onmouseover =showMenu（this）;的onmouseout = hideMenu（本）; >
< a style =color：red; HREF = JavaScript的：无效（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;& 帮助< / a>< / div>
< br>< br>
< div>< a href =class =topMenu>管理指派< / a>< br>< a href =class =secondMenu>& nbsp; & nbsp;& nbsp;& nbsp;使用者查询< / a>< / div>
< / div>
< / div>
< / li>
< / ul>
< br />< br />< br />< br />< br />
测试
我测试了你的代码，它工作正常！你的浏览器是什么？请放置演示并添加此代码以及
a.setAttribute（'style'，'background-color：blue' ）;
一些浏览器与 I have created Why it doesn't change? Styles: Script: HTML: I tested your code and it worked! what is your browser? please place a demo and also add this code as well some browsers have incompatibility with 这篇关于为什么菜单背景颜色不变？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！元素风格不兼容 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.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="";
}
<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"> Message </a></div>
<br><br>
<div><a href="" class="topMenu">Manage Assignment</a><br><a href="" class="secondMenu"> 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"> Message </a><br><a href="" class="secondMenu"> Help </a></div>
<br><br>
<div><a href="" class="topMenu">Manage Assignment</a><br><a href="" class="secondMenu"> User Inquiry</a></div>
</div>
</div>
</li>
</ul>
<br/><br/><br/><br/><br/>
Test
a.setAttribute('style','background-color:blue');
element.style
