在鼠标悬停和鼠标单击时更改菜单颜色答案

【问题标题】：Change menu color on mouseover and onmouseclick在鼠标悬停和鼠标单击时更改菜单颜色
【发布时间】：2012-04-30 06:00:43
【问题描述】：

我的菜单项的 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 事件上更改菜单项的背景颜色。请帮我。我试过。但是没有用。

【问题讨论】：

标签： html menu colors background onclick

【解决方案1】：

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

code is here

【讨论】：

【解决方案2】：

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

您的 CSS 应包含以下条目：

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

希望有帮助

【讨论】：

谢谢。我已经测试过了。我需要保留该颜色，直到单击其他菜单。

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

由于您的链接中有 id 属性，因此您需要使用 css 设置链接样式

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

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

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

【讨论】：

谢谢。我已经测试过了。我需要保留该颜色，直到单击其他菜单。
你能举个例子吗 .hrefLink a { style... } .hrefLink a:hover { style... }

【解决方案5】：

试试这个：

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

【讨论】：