Changing background on hover using CSS Classes

[benniaustin]

If was my site, I'de use the first css solution. If I recall, IE7 suppots :hover pseudoclasses on anything. IE7 will be dominant over IE6, I'm guessing by the end of january.

On the other hand if I was doing something for a client, I'de probably go with a javascript solution, but put the css in too just for redundancy. If I were to use js though I'de use a changeclass funtion, like the one below:

function changeClass(myElementID) {
  if(document.getElementById(myElementID).className == "basicRow") {
    document.getElementById(myElementID).className = "highlightRow";
  }
  else {
    document.getElementById(myElementID).className = "basicrow";
  }
}

<tr class="basicRow" id="Row1" onmouseover="changeClass(Row1)"  onmouseout="changeClass(Row1)">

[benniaustin]

Remember that the whole point of CSS is to keep your markup clean. When your adding extra anchor tags just to write a css hack, you might as well be using js.

[Twey]

Except on points of compatibility, of course.

[jscheuer1]

jscheuer1:

Would you mind showing me what I could do to make the code work in IE7 to by using your "selectors". I never worked with selectors nor do I know anything about them. Except I read some of them now but do not really get a grip on how this would solve my problem.

The style -

.hlink {
display block;
height:20px;
width:75px;
color:black;
background-color:white;
text-align:center;
text-decoration:none;
}
.hlink:hover {
color:white;
background-color:black;
}

The markup -

<a class="hlink" href="whatever.htm">Hey!</a>

Notes: This is not a hack. It is simply a way to make a link that will behave as desired. It does not involve any browser reading different code than any other browsers and uses no javascript.

[mwinter]

If I recall, IE7 suppots :hover pseudoclasses on anything.

Yes, it does.

IE7 will be dominant over IE6, I'm guessing by the end of january.

Maybe. Maybe several years from now.

IE 7 is not available for all Windows platforms, and far from every Windows user uses WinXP SP2 or later. There are still plenty that use WinXP and WinXP SP1, as well as earlier operating systems: NT, '98, ME, 2000 - probably even '95 and 3.1, in a few dwindling cases. Whether WinXP SP2, Windows Server 2003, and Vista will outnumber those others remains to be seen. Even if they do, older operating systems will continue to be a significant minority.

function changeClass(myElementID) {
  if(document.getElementById(myElementID).className == "basicRow") {
    document.getElementById(myElementID).className = "highlightRow";
  }
  else {
    document.getElementById(myElementID).className = "basicrow";
  }
}

That's rather inefficient, and using two class names is a little much. One needn't obtain a reference more than once.

function changeClass(id) {
    var element;

    if (document.getElementById && (element = document.getElementById(id)))
        element.className = (element.className == 'highlight') ? '' : 'highlight';
}

That said, it would be better behaved if it didn't interfere with other potential class names:

function toggleClassName(id, className) {
    var classPattern = new RegExp('(^|\\s)' + className + '(\\s|$)'),
        element;

    if (document.getElementById && (element = document.getElementById(id)))
        if (classPattern.test(element.className))
            element.className = element.className.replace(classPattern, ' ');
        else element.className += ' ' + className;
}

<tr class="basicRow" id="Row1" onmouseover="changeClass(Row1)"  onmouseout="changeClass(Row1)">

Run-time error aside, there's little point in passing an identifier to then obtain a reference, when a reference can be passed directly:

function toggleClassName(element, className) {
    var classPattern = new RegExp('(^|\\s)' + className + '(\\s|$)');

    if ((typeof element == 'string') && document.getElementById)
        element = document.getElementById(element);

    if (element)
        if (classPattern.test(element.className))
            element.className = element.className.replace(classPattern, ' ');
        else element.className += ' ' + className;
}

<tr onmouseover="toggleClassName(this, 'highlight');"
    onmouseout="toggleClassName(this, 'highlight');">

Mike

[xAyiDe]

jscheuer1:

Sorry but the thing you showed does not allow for a whole row in a table to be hoverhighlitghed as I was aiming for.

[boxxertrumps]

you would need to select all child elements of the row when the row is hovered over...
CSS that should work...

tr:hover>td{background-color:#ffffff;}

but selectors aren't supported well in many browsers...
http://www.w3.org/TR/REC-CSS2/selector.html

EDIT:
and twey, i thought that the row element was the only one that couldn't be styled...

[Twey]

No, any element can be styled.

CSS that should work...

tr:hover>td{background-color:#ffffff;}

Firstly, as you noted, IE<7 doesn't support the child selector (>), so it would actually use the descendent selector ( ), like so:

tr:hover td {
  background-color:#ffffff;
}

Unfortunately, IE<7 also doesn't support :hover on anything except <a> elements. Thus the problem to which several solutions have been offered above.

[tiagofaustino]

download a csshover.htc like this:
http://www.xs4all.nl/~peterned/htc/csshover.htc

Put in your css file:
body{behavior:url(csshover.htc);}

and configure the hover in your site. The hover will work fine in IE6. Try!

Sorry my english... I´m Brazilian and I just learning this language..

[jscheuer1]

download a csshover.htc like this:
http://www.xs4all.nl/~peterned/htc/csshover.htc

Put in your css file:
body{behavior:url(csshover.htc);}

and configure the hover in your site.

Though often quite effective, these various .htc files are only as good as the javascript contained in them. Yes, javascript. What many people don't realize is, that if you use a behavior with a .htc file to make up for anything in any version of IE, it relies upon javascript.

Now, this is about the best that can be expected in many cases. However, with css hover and IE < 7, usually the lack of hover on elements other than anchor links can be solved with css and markup alone. When this is the case, it is a better solution than any script or (by extension) .htc behavior, as it will work in IE browsers even when javascript is disabled.

It can be a little tricky, owing to the vagaries of IE < 7 implementation of style. But the basic concept is to make the element that you want to apply hover to a child of an anchor link. Once you have that, it can usually be mapped out in the stylesheet to exhibit the desired hover effect.