[英]How can I apply a background-color to several elements on hover?
我有一些列表显示为内联块，创建行的错觉。 与表格不同，我无法直接格式化行。 当一个人悬停在上面时，我想为行中的每个<li>应用背景颜色。 这可能通过CSS和名称/ ID吗？
谢谢。
麦克风
澄清：在阅读答案后，我意识到我的问题不清楚。 我有3个并排列表，所以每个列表中的第一个<li>代表第一行。 每个列表中的第二个<li>将是第二行。 等等。
使用jQuery的跨浏览器支持：
CSS：
li:hover { background-color: #F00 }
对于IE6 - 因为它不支持除了<a>元素之外的任何东西的hover伪类 - 你在IE6特定的样式表和脚本中提供以下内容：
CSS：
li.hover { background-color: #F00 }
JS：
$("li").hover(
function() {
$(this).addClass("hover");
},
function() {
$(this).removeClass("hover");
}
);
不确定我是否理解正确，但这个相当简单的解决方案应该可以解决问题：
li:hover {
background-color: pink;
}
但是有些浏览器不支持hover伪类。
如果要将样式应用于特定<ul>所有子元素，可以使用bigmattyh的方法，但在<ul>而不是<li>上设置类。
然后，添加一个CSS样式，如下所示：
.hover li { /* some styles */ }
使用此方法，您可以将样式应用于所有子<li>元素，但您只需要父<ul>中的事件处理程序，从而使代码运行得更快。
我会简化并重新组织HTML，以便每个UL都是一行而不是一列。
<html>
<head>
<style>
ul { clear: both; }
ul li {
float: left;
list-style: none;
padding: 5px 10px;
border: 1px solid white; }
.hover { background-color: red; }
</style>
</head>
<body>
<div id='list-container'>
<ul class="hover">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
</body>
</html>
和JS：
$(document).ready(function() {
var alterRow = function(container, class, toggleOn) {
$(container).children().each(function(i, node) {
if ( toggleOn ) {
$(node).addClass(class);
} else {
$(node).removeClass(class);
}
});
};
$("#list-container ul").each(function(i, node) {
$(node).hover(
function() { alterRow(node, "hover", true); },
function() { alterRow(node, "hover", false); }
);
});
});
您可以在此处查看和编辑它： http ： //jsbin.com/ewijo
如何更改 hover 表元素的行和列背景色？
[英]How can I change the row and colum background-color on hover a table element?
如何让 Firefox 在 a:hover *before* javascript 例程运行时更新背景颜色？
[英]How can I get Firefox to update background-color on a:hover *before* a javascript routine is run?
如何在onmouseout事件中将背景颜色更改为透明？
[英]How can I change the background-color to transparent on an onmouseout event?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.