Question

I have a few lists that are displayed as inline-blocks, creating the illusion of rows. Unlike tables, I cannot format rows straightforwardly. I want to apply a background color to each < li > in the row when one is hovered over. Is this possible through CSS and names/IDs?

Thanks.

Mike

CLARIFICATION: After reading the answers, I realized my question was unclear. I have 3 lists, side by side, so the first < li > in each list would represent the first row. The second < li > in each list would be the second row. And so on.

Answer 1

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");
  }
);