ansaurus

Question

How can I apply a background-color to several elements on hover?

Answer 1

+1 A:

Not sure if I understand correctly, but this fairly simple solution should do the trick:

li:hover {
  background-color: pink;
}

Some browsers do not support the hover pseudo class though.

Gerald Senarclens de Grancy 2009-07-19 20:22:43

looks like you don't understand the question correctly:)

Kamarey 2009-07-19 20:58:59

Answer 2

+3 A:

Cross-browser support with jQuery:

CSS:

li:hover { background-color: #F00 }

And for IE6 -- since it does not support the :hover pseudo-class on anything but <a> elements -- you serve it the following in your IE6-specific style sheets and script:

CSS:

li.hover { background-color: #F00 }

JS:

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

bigmattyh 2009-07-19 20:26:21

I almost gave you a -1 but then I realized what you were getting at, so let me state it explicitly for the rest of the class: IE6 only supports hover on the anchor (a) element, and not on list items (li).

Justin Johnson 2009-07-19 23:16:51

Edited my answer to reflect that, for the class.

bigmattyh 2009-07-20 19:53:12

Answer 3

A:

If you want to apply a style to all child elements of a specific <ul>, you can use bigmattyh's approach but set the class on the <ul> instead of the <li>.

Then, add a CSS style such as this:

.hover li { /* some styles */ }

Using this approach you can apply styles to all of the child <li> elements, but you will only need event handlers in the parent <ul>, making your code run faster.

Jani Hartikainen 2009-07-19 20:37:03

Answer 4

A:

I would simplifying things and reorganize your HTML so that each UL is a row instead of a column.

<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>

And the 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); }
    );
  });
});

You can see and edit it here: http://jsbin.com/ewijo

Justin Johnson 2009-07-19 23:55:54

I'll take a look and see if I can get this to work.

Mike 2009-07-20 04:22:34

ansaurus

tags:

views:

answers:

How can I apply a background-color to several elements on hover?

related questions