PDA

View Full Version : Changing background on hover using CSS Classes



AlistairH
08-05-2005, 11:50 AM
In order to dynamically change the background colour of a table row when the mouse is over it I am currently using something like:


<TR onMouseOver="this.style.backgroundColor='#E1EAFE'"; onMouseOut="this.style.backgroundColor='transparent'">

I'd like to get away from using mouse events and use pure styles, ideally created as classes and placed in a separate linked style sheet. Can this be done?

Please that whilst there may be a hyperlink in the row, more often than not there won't be, but I still want the background colour to change.

Cheers

Twey
08-05-2005, 12:07 PM
tr:hover {
background-color: #e1eafe;
}
However, I have a horrible feeling this might not work in IE.

jscheuer1
08-05-2005, 01:56 PM
tr:hover {
background-color: #e1eafe;
}
However, I have a horrible feeling this might not work in IE.It won't. IE only uses the hover pseudo class on links.

Twey
08-05-2005, 02:50 PM
That's what I thought. Sorry, Alistair. The most common solution to this is to change the class with Javascript, but if you don't want to use Javascript, you're... you can't.

AlistairH
08-05-2005, 03:13 PM
OK guys and thanks. I just wanted to avoid having all this extra code in a table which is going to grow quite large in the coming months. But if can't be done, it can't be done.

Cheers

jscheuer1
08-05-2005, 06:21 PM
Well, using css to do background color rollovers for table cells can be done in IE, it just requires a lot more effort than Mozilla. Formatting of the contents of the cell becomes a particular challenge. Here is a rather basic example that also shows some of the ways you might use to achieve the desired formatting of text:

<html>
<head>
<title></title>
<style type="text/css">
a.bg{
width:100%;
height:100%;
text-decoration:none;
cursor:default;
color:black;
padding-top:.6ex;
margin-bottom:-.4ex;
}
a.bg:hover{
background-color:pink;
width:100%;
height:100%;
}
td.bg {
padding:0;
margin:0;
}
</style>
</head>
<body>
<table height="300" border="1">
<tr>
<td height="225"><img src="thumb2/photo9.jpg" width="140" height="225" border=0 alt="" title=""></td>
</tr>

<tr>
<td class="bg"><a class="bg" href="javascript:void(0);"><br><center>Hi!</center></a></td>
</tr>
</table>

</body>
</html>The real challenge is hiding all this garbage from other browsers.

Twey
08-05-2005, 06:26 PM
No, he wanted the whole row's class to change, because sometimes there won't be a link in it.

Please that whilst there may be a hyperlink in the row, more often than not there won't be, but I still want the background colour to change.

jscheuer1
08-05-2005, 06:40 PM
It can still be fudged around, the row could span all columns and therefore be a cell, to make it look like a row, another table could be put in it with no background specified. As I said before though, the real problem is hiding it all from other browsers.

Twey
08-05-2005, 07:38 PM
But it's exactly the same problem with a cell as with a row: IE still doesn't support hover on it. Unless there's a way to technically make the link fill the whole cell, whilst still appearing to be the same size.

jscheuer1
08-05-2005, 08:35 PM
Try my example code.

Twey
08-06-2005, 08:18 AM
Doesn't do a thing; doesn't even change the link's background colour.

Maybe it works in IE. I don't have IE to hand to test it, I'm afraid.

jscheuer1
08-06-2005, 01:21 PM
Well, that's a good sign. Maybe we don't need to hide it from other browsers then, and trust me, it works well in IE and:

td.bg:hover {
background-color:pink;
}Will make it do so in many other browsers. I would like to stress though that, due to its complexity, I am not putting this forth as a viable solution to the OP's original question. However, if he/she is willing to go through all the trouble, it would eliminate the need for javascript - javascript:void(0) does not require javascript in order to be a null link, at least in IE and Mozilla.

Twey, you really should consider getting a test IE environment. I know you really like what you are using and I'm sure it is really great but, the fact remains most folks use IE/win. I do but, not because I think it is anything hot - although I am excited by some of the proprietary code especially, of late, the createPopup() method. I also use and truly appreciate two Mozilla based browsers and have on hand Konqueror as well as IE4, 5 and NS4 for specialty testing. I'm doing all this on one humble laptop computer well past its Fortune 500 executive expiration date, they really make some good ones these days. Sooner or later I will have a Mac environment of some kind as well.

Twey
08-06-2005, 02:19 PM
I usually get friends to test things for IE. I tried installing it with winetools a long time ago, but it didn't like it. I find that Opera is pretty similar for most things. I have on hand Konqueror, Firefox, Mozilla, Epiphany, Lynx, Links, Opera, Galeon, Dillo, and kfm, which isn't really a web browser but is capable of it. I'd like to get a Mac, but I can't afford it, so I rely on friends there too.

I have just found a tutorial on installing IE6 with wine, and am attempting it now.

AlistairH
08-06-2005, 03:08 PM
Thanks for the reply John. I'm out and about this weekend so I'll have a more detailed look at your code early next week.

StellarDevil
08-11-2005, 10:37 PM
I just read this thread and i already did most of these things..

The bigest problem with the hover option is that IE has limited support for it. And all in all it's so limited it gave me a headache.. :mad:
The best way to make virtualy anything a rollover is to combine css and Javascript, since nearly all the browsers have the same Js support and atleast css1.



<SCRIPT language="JavaScript">
function rollbg(chosen, objectID) {
if(chosen == "roll") {
document.getElementById(objectID).className="roll";
}
else {
document.getElementById(objectID).className="over";
}
}
</SCRIPT>
<STYLE>
.roll {
background-image: url(dot_nice1.gif);

}
.over {
background-image: url(dot_nice2.gif);
}
</STYLE>


I use this code to make complete table rows a rollover by giving the tablerow the same id at the TD's in it, because it will only change the first thing it finds in the code and no more then that.

The html code u could use to make complete tablerows change background or whatever you want to change in with the css code. You can also use exactly the same code for A HREF and (as far as i know anything that u can give a class)


<TABLE>
<TR id="objectsid1">
<TD class="over" OnMouseOver="rollbg('roll', 'objectsid1')" OnMouseOut="rollbg('over', 'objectsid1')"> foo </TD>
<TD class="over" OnMouseOver="rollbg('roll', 'objectsid1')" OnMouseOut="rollbg('over', 'objectsid1')"> bar </TD>
</TR>
<TR id="objectsid2">
<TD class="over" OnMouseOver="rollbg('roll', 'objectsid2')" OnMouseOut="rollbg('over', 'objectsid2')"> foo </TD>
<TD class="over" OnMouseOver="rollbg('roll', 'objectsid2')" OnMouseOut="rollbg('over', 'objectsid2')"> foo </TD>
</TR>
</TABLE>


You can put this code into a page to test it, you should remember you have to have two pictures for the css, or change it to changing the bgcolor.

Do remember that the css and java code is put between the head and body.

Twey
08-12-2005, 09:03 AM
the css and java code
(points emphatically at the sig) :mad:

mwinter
08-13-2005, 12:37 AM
I'd like to get away from using mouse events and use pure styles, ideally created as classes and placed in a separate linked style sheet. Can this be done?If you're interested, take a look at some old code (http://mwinter.webhop.info/clj/easyrider/table.html) of mine. It's a script-based solution, and should be coupled with CSS (as it is in the example). However, it does save adding intrinsic event attributes to all of your rows.

Only some of code is necessary (initialiseTableRuler and the functions it calls) and it could be simplified somewhat, but it should suffice.



since nearly all the browsers have the same Js support and atleast css1You don't have access to a wide range of user agents, do you?


<SCRIPT language="JavaScript">The language attribute has long been deprecated in favour of the (required) type attribute:


<script type="text/javascript">The same applies to the style element, with a text/css MIME type.


Do remember that the css and java code is put between the head and body.The 'Java' mention aside, between the head and body elements? Not at all.

Mike

xAyiDe
12-08-2006, 12:15 PM
Hi!

I have a solution working in IE6 and FireFox at least. But still problems in the new IE7:



<STYLE>
a {text-decoration:none; color: black;}
#list {background-color:#ffffff;}
#list td{cursor:pointer;}
#list a:hover{background-color:#ffff00;color:#000000;}
#list a:hovered td{background-color:#ffff00;color:#000000;}
#list a:hovered a{background-color:#ffff00;color:#000000;}
#list a:hover td{color:#000000;}
#list a:hover a{color:#000000;}
#list table:hover{background-color:#ffff00;color:#000000;}
#list table:hover td{color:#000000;}
#list table:hover a{color:#000000;}
</STYLE>
<TABLE>
<TR>
<TD id="list" width="100%">
<A href="http://www.aftonbladet.se">
<TABLE width="100%" cellpadding="0" cellspacing="0">
<TR>
<TD nowrap class="filetype" align="left" width="100%">
<a href="http://www.aftonbladet.se">Some link here!</a>
</TD>
<TD>
<TABLE width="20px">
</TABLE>
</TD>
<TD nowrap align="right" width="50px">07/11/2006
</TD>
</TR>
</TABLE>
</A>
</TD>
</TR>
</TABLE>

jscheuer1
12-08-2006, 07:17 PM
I have a solution working in IE6 and FireFox at least. But still problems in the new IE7:

Why not use one of the other methods available then? IE 7 will allow for the pseudo classes to be applied to most elements now. The only real problem browsers are IE 6 and earlier. Most of those still in use will respond well to making an element the child of an anchor link and styling it on that basis as is done here:

http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/

xAyiDe
12-21-2006, 10:35 AM
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.

benniaustin
12-21-2006, 03:46 PM
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
12-21-2006, 03:55 PM
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
12-21-2006, 04:25 PM
Except on points of compatibility, of course.

jscheuer1
12-21-2006, 06:25 PM
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
12-22-2006, 12:12 PM
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
02-20-2007, 12:21 PM
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
02-20-2007, 02:35 PM
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
02-20-2007, 06:34 PM
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
06-05-2008, 04:13 PM
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... Im Brazilian and I just learning this language..

jscheuer1
06-05-2008, 06:54 PM
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.

cancer10
08-20-2008, 07:05 AM
Thanx...was looking for a solution like this :)