html - 在鼠标悬停和鼠标单击时更改菜单颜色

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

您的链接可能需要classhrefLink 的名称，而不是共享相同的id.

你的 CSS 应该有如下条目：

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

希望有帮助

Answer 2

参考这个网站。我认为这就是你所需要的。

代码在这里

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;
}