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

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更改mouseover和mouseclick事件中菜单项的背景色。请帮帮我。我试过了。但没有起作用。

Answer 1

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

code is here

Answer 2

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

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

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

希望这能有所帮助

Answer 3

以上所有答案都是正确的，它们完全符合您的要求。就onmouseclick而言，如果您希望使用Jquery，那么...

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

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