为什么菜单背景颜色不能改变
Why can't the menu background color change?
我创建了 2 个菜单:prod & prod2,我发现当鼠标聚焦在 prod2 上时,背景颜色会改变,
但是当鼠标聚焦在 prod1 上时,背景颜色不会改变,为什么它没有改变?
.HTML
<body>
<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
</body>
.CSS
<style>
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;
}
</style>
爪哇语
<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="";
}
</script>
给 CSS
.arrow_box{ position:absolute; white-space:nowrap}
相关文章:
- javascript帖子不做功能但加载url
- 为什么菜单背景颜色不能改变
- 为什么不是'改变我工作价值观的逻辑
- replaceAll不'不要改变任何事情
- Marionette ItemView不发射“;改变“;事件
- 视口比例;方向改变后不能工作
- 函数不能计算分数和改变页面元素的值
- 为什么我不能在这里改变zIndex呢?
- 我怎么能自动改变谷歌街景的旋转角度
- 外部变量不能在Promise内部改变.然后函数
- JS滑块不能改变图像的动画时间
- 如何改变所有选定的项目背景/类,而不是只改变一个选定的项目在ng-repeat角
- React不会立即改变状态
- 我们怎么能只改变网页的内部部分呢?
- React: Component'的子元素不应该被改变
- 画布笔触样式不可靠地改变
- 简单的D3演示不工作与改变结构
- 时间不会自动改变
- 背景颜色不会永久改变
- -webkit-box-shadow不能正确改变javascript