如何在悬停时将背景颜色应用于多个元素？答案

【问题标题】：How can I apply a background-color to several elements on hover?如何在悬停时将背景颜色应用于多个元素？
【发布时间】：2009-07-19 20:16:25
【问题描述】：

我有一些显示为内联块的列表，从而产生了行的错觉。与表格不同，我不能直接格式化行。当悬停在行中时，我想为行中的每个应用背景颜色。这可以通过 CSS 和名称/ID 实现吗？

谢谢。

迈克

澄清：阅读答案后，我意识到我的问题不清楚。我有 3 个并排的列表，因此每个列表中的第一个将代表第一行。每个列表中的第二个将是第二行。以此类推。

【问题讨论】：

听起来您正在尝试使用列表元素制作表格。你不只是使用一张桌子有什么原因吗？
我也有同样的问题。为什么不直接使用表格元素？

标签： javascript html css

【解决方案1】：

jQuery 的跨浏览器支持：

CSS：

li:hover { background-color: #F00 }

对于 IE6——因为它不支持除了元素之外的任何东西上的 :hover 伪类——你可以在你的 IE6 特定样式表和脚本中为它提供以下内容：

CSS：

li.hover { background-color: #F00 }

JS：

$("li").hover(
  function() {
    $(this).addClass("hover");
  },
  function() {
    $(this).removeClass("hover");
  }
);

【讨论】：

我差点给你一个-1，但后来我意识到你在说什么，所以让我明确说明一下课堂的其余部分：IE6 只支持将鼠标悬停在锚 (a) 元素上，而不是列表项 (li)。
编辑了我的答案以反映这一点，对于班级。

【解决方案2】：

不确定我是否理解正确，但这个相当简单的解决方案应该可以解决问题：

li:hover {
  background-color: pink;
}

有些浏览器不支持悬停伪类。

【讨论】：

【解决方案3】：

如果您想将样式应用于特定<ul> 的所有子元素，您可以使用bigmattyh 的方法，但将类设置在<ul> 而不是<li>。

然后，添加这样的 CSS 样式：

.hover li { /* some styles */ }

使用这种方法，您可以将样式应用于所有子 <li> 元素，但您只需要父 <ul> 中的事件处理程序，从而使您的代码运行得更快。

【讨论】：

【解决方案4】：

我会简化事情并重新组织您的 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

【讨论】：