Как я могу применить цвет фона к нескольким элементам при наведении? - PullRequest
Новая
       0

Как я могу применить цвет фона к нескольким элементам при наведении?

1 голос
/ 20 июля 2009

У меня есть несколько списков, которые отображаются в виде встроенных блоков, создавая иллюзию строк. В отличие от таблиц, я не могу напрямую отформатировать строки. Я хочу применить цвет фона к каждому

в строке, когда он находится над ним. Возможно ли это через CSS и имена / идентификаторы?

Спасибо.

Майк

РАЗЪЯСНЕНИЕ: Прочитав ответы, я понял, что мой вопрос неясен. У меня есть 3 списка, рядом, поэтому первый

в каждом списке будет представлять первую строку. Второй в каждом списке будет второй строкой. И так далее.

Ответы [ 4 ]

3 голосов
/ 20 июля 2009

Кросс-браузерная поддержка с 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 голос
/ 20 июля 2009

Не уверен, правильно ли я понимаю, но это довольно простое решение должно помочь: 

li:hover {
  background-color: pink;
}

Однако некоторые браузеры не поддерживают псевдокласс hover.

0 голосов
/ 20 июля 2009

Я бы упростил вещи и реорганизовал бы ваш 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

0 голосов
/ 20 июля 2009

Если вы хотите применить стиль ко всем дочерним элементам определенного <ul>, вы можете использовать подход bigmattyh, но установите класс на <ul> вместо <li>.

Затем добавьте стиль CSS, например, такой: 

.hover li { /* some styles */ }

Используя этот подход, вы можете применять стили ко всем дочерним <li> элементам, но вам понадобятся только обработчики событий в родительском <ul>, чтобы ваш код работал быстрее.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...