我创建了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"> 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
答案 0 :(得分：1)
我测试了你的代码并且它有效！你的浏览器是什么？请放置一个演示，并同时添加此代码
a.setAttribute('style','background-color:blue');
某些浏览器与element.style
答案 1 :(得分：0)
答案 2 :(得分：0)
尝试下面的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"> Message </a></div>
<br><br>
<div><a href="" class="topMenu">Manage Assignment</a><br><a href="" class="secondMenu"> 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"> 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
</body>
答案 3 :(得分：-1)
请检查您的HTML：
因为您为Pord or Pord2执行相同的功能，但内部html对于li都不同。所以function showMenu() Pord or Pord2的工作方式不同{/ 1}：
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"> Message </a>
</div>
<br />
<br />
<div>
<a href="" class="topMenu">Manage Assignment</a><br>
<a href="" class="secondMenu"> 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"> 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 /> div放在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="";
}