Question

菜单项的html代码如下所示

<div id="menuBar">
<ul>
<li><a href="${pageContext.request.contextPath}/jsp/Main.jsp?menu=3&skin=1&p=Javascript-Menus">Home</a></li>
<li><a href="${pageContext.request.contextPath}/jsp/RootSipResourceUI.jsp?menu=3&skin=1&p=Horizontal-Menus">Add</a></li>
<li><a href="${pageContext.request.contextPath}/jsp/EditAppId.jsp?menu=3&skin=1&p=Web-Menus" onclick="changeColor(this);">Edit</a></li>
<li><a href="${pageContext.request.contextPath}/jsp/EditAppId.jsp?menu=3&skin=1&p=Web-Menus">Remove</a></li>
</ul>
</div>

我需要使用javascript或css html在鼠标悬停和鼠标点击事件上更改菜单项的背景颜色。请帮我。我试过了。但是没有用。

Answer 1

您的链接可能需要hrefLink的class名称，而不是共享相同的id。

您的CSS应该包含以下条目：

#menuBar a { style... }
#menuBar a:hover { style... }

希望有所帮助

Answer 2

Refer this site. I think this is what you need.

code is here

Answer 3

以上所有答案都是正确的，它们完全符合您的要求。至于onmouseclick是关注的，如果你想使用Jquery，那么......

<script>
$(document).ready(function() {
$("#menuBar > a").click(function() {
$(this).addClass("active");
});
});
</script>

<style>
.active { background:#3d3d3d; }
</style>

Answer 4

由于您的链接中包含id属性，因此您需要使用css（如

）设置链接的样式

#hrefLink a { background-color:white; }
#hrefLink a:hover { background-color:black; }

Css id元素应该只出现在页面上一次，所以我建议使用css类和上面给出的例子。

.hrefLink a { style... }
.hrefLink a:hover { style... }

Answer 5

试试这个：

.ClassA:hover
{
 background-color: #245250;
}
.ClassB:active
{
 background-color: #FFFFFF;
}

鼠标悬停和onmouseclick上的菜单颜色更改

5 个答案: