Question

我有几个列表显示为内联块，创建了行的错觉。与表格不同，我无法直接格式化行。我想将背景颜色应用于每个＆lt; li>当一个人盘旋在一排时。这可以通过CSS和名称/ ID吗？

感谢。

迈克

澄清：在阅读答案后，我意识到我的问题不清楚。我有3个列表，并排，所以第一个＆lt; li>在每个列表中将代表第一行。第二个＆lt; li>在每个列表中将是第二行。等等。

Answer 1

jQuery的跨浏览器支持：

CSS：

li:hover { background-color: #F00 }

对于IE6 - 因为它不支持：hover伪类，但不包括＆lt; a＆gt;元素 - 您在IE6特定的样式表和脚本中提供以下内容：

CSS：

li.hover { background-color: #F00 }

JS：

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

Answer 2

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

li:hover {
  background-color: pink;
}

有些浏览器不支持hover伪类。

Answer 3

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

然后，添加一个CSS样式，如：

.hover li { /* some styles */ }

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

Answer 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

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

4 个答案: