PDA

Click to See Complete Forum and Search --> : CSS Help please

Ash:o
08-22-2004, 07:01 AM
Hi all,
OK were to start, i've made up a table and i would like the rows in the table to change color when i hover over then, i have got the text to change but not the rows background color which i would like to change when i hover over them.
can someone help please heres the code. oooo this is my first go at CSS.

Yours Ashley

--------------------------
Page1 html_hover_test.html
--------------------------
<html>
<head>
<meta http-equiv="Content-Language" content="en-au">
<link rel="stylesheet"
type="text/css" href="CSS_hover_test_sheet.css" />
</head>

<body>
<div align="center">
<table border="1" cellspacing="1" style="border-collapse: collapse" width="75%">
<tr>
<td class="row1" width="11%" <p><b><a class="row1" href="webmaster.html" target="_blank">
<p align="center"<span style="text-decoration: none">Home</span></a></b></p></td>
<td class="row2">&nbsp;</td>
<td class="row3">&nbsp;</td>
<td class="row4">&nbsp;</td>
<td class="row5">&nbsp;</td>
<td class="row6">&nbsp;</td>
<td class="row7">&nbsp;</td>
<td class="row8">&nbsp;</td>
</tr>
</table>


</div>


</body>
</html>


-------------------------------
Page2 CSS_hover_test_sheet.css
-------------------------------
table {background-color: #99ccff}
.row1 {background-color:#000080; color:#FFFFFF;font-size: 8pt; font-family: arial; font-weight: bold}
.row2 {background-color:#000080; color:#FFFFFF;font-size: 8pt; font-family: arial; font-weight: bold}
.row3 {background-color:#000080; color:#FFFFFF;font-size: 8pt; font-family: arial; font-weight: bold}
.row4 {background-color:#000080; color:#FFFFFF;font-size: 8pt; font-family: arial; font-weight: bold}
.row5 {background-color:#000080; color:#FFFFFF;font-size: 8pt; font-family: arial; font-weight: bold}
.row6 {background-color:#000080; color:#FFFFFF;font-size: 8pt; font-family: arial; font-weight: bold}
.row7 {background-color:#000080; color:#FFFFFF;font-size: 8pt; font-family: arial; font-weight: bold}
.row8 {background-color:#000080; color:#FFFFFF;font-size: 8pt; font-family: arial; font-weight: bold}
body {background-image: url("backgroun_test.jpg")}
a.row1:link {color: #ffffff}
a.row1:visited {color: #ffffff}
a.row1:hover {color: #c0c0c0}
Fang
08-22-2004, 07:15 AM
See this thread (http://www.webdeveloper.com/forum/showthread.php?s=&threadid=42326)
Charles
08-22-2004, 08:17 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>

<script type="text/javascript">
<!--
setTable = !document.getElementById ? function () {} : function () {
var e, i;
for (i = 0; e = document.getElementById('giantSays').getElementsByTagName('TD')[i]; i++) {e.onmouseover = function() {this.parentNode.className = 'over'}; e.onmouseout = function () {this.parentNode.className = ''}}
}
// -->
</script>

<style type="text/css">
<!--
table#giantSays th, table#giantSays td{background-color:#008; color:#fff}
table#giantSays tr.over td {background-color:#800}
-->
</style>

</head>
<body onload="setTable()">
<table id="giantSays" summary="some data">
<caption>Giant Says</caption>
<thead>
<tr><th>fee</th><th>fie</th><th>foe</th><th>fum</th></tr>
</thead>
<tbody>
<tr><td>fee</td><td>fie</td><td>foe</td><td>fum</td></tr>
<tr><td>fee</td><td>fie</td><td>foe</td><td>fum</td></tr>
<tr><td>fee</td><td>fie</td><td>foe</td><td>fum</td></tr>
<tr><td>fee</td><td>fie</td><td>foe</td><td>fum</td></tr>
</tbody>
</table>
</body>
</html>
Ash:o
08-22-2004, 08:24 AM
Originally posted by Fang
See this thread (http://www.webdeveloper.com/forum/showthread.php?s=&threadid=42326)

Hi fang,
that dose not look like what i need sorry.

I need to know how to wrigth it to a css sheet not in html or javascript thats what it looks like to me in that forum,
i can do that. what is the form, style, code that i use to wright it to css sheet.
Charles
08-22-2004, 08:28 AM
Originally posted by Ash:o
I need to know how to wrigth it to a css sheet not in html or javascript thats what it looks like to me in that forum,
i can do that. what is the form, style, code that i use to wright it to css sheet. There is no such thing. the "hover" pseudo class only applies to links. See http://www.w3.org/TR/REC-CSS2/.
Ash:o
08-22-2004, 08:39 AM
OK sorry all

Yours Ashley
Fang
08-22-2004, 08:47 AM
Ash&#x003A;o you are apparently creating a table of links, which is semantically incorrect.
A list of links would be better.
You can use css to change the background when you use hover on the link as Charles mentioned.

Alternatively you may wish to check out whatever:hover (http://www.xs4all.nl/~peterned/csshover.html)
Stephen Philbin
08-22-2004, 11:36 AM
Isn't the hover pseudo class supposed to be applicable to all elements, just the IE screws it up (again) ?
MstrBob
08-22-2004, 12:23 PM
http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes

Indeed Charles, you confuse me. While :link and :visited apply only to links, no where in the documentation does it state that :hover , :active , or :focus can only be used on links. These dynamic pseudoclasses should be applicable to all elements. However, in real life application of CSS, one is severely limited due to the fact that IE does NOT support these pseudoclasses, except with links.
Vladdy
08-22-2004, 12:32 PM
Originally posted by MstrBob
http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes

Indeed Charles, you confuse me. While :link and :visited apply only to links, no where in the documentation does it state that :hover , :active , or :focus can only be used on links. These dynamic pseudoclasses should be applicable to all elements. However, in real life application of CSS, one is severely limited due to the fact that IE does NOT support these pseudoclasses, except with links.
As Fred mentioned in the referenced thread, the fix for IE dumbness is shorter than your post:
www.vladdy.net/Demos/IEPseudoClassesFix.html
Ash:o
08-22-2004, 12:36 PM
OK thanks guys

Yours Ashley
Charles
08-22-2004, 12:44 PM
It seems that I've been misreading the CSS2 spec. Thank you Fang for catching that.

A few years back I attended a memorial gathering for one of my old Philosophy professors. Someone there said something about him that struck me as being the highest compliment that one could give to someone whose passion was the life of the mind. My old teacher was truly happy to be found out wrong about something.
David Harrison
08-22-2004, 09:38 PM
Originally posted by Charles
the "hover" pseudo class only applies to links.[/url]. Holy crap, are you trying to kill me? In all seriousness, when I read that I think my heart stopped. :eek:

I would post something actually useful here, but it seems that everything is said and done.
ray326
08-22-2004, 10:51 PM
Originally posted by Charles
There is no such thing. the "hover" pseudo class only applies to links. See http://www.w3.org/TR/REC-CSS2/. The :hover, :active and :focus pseudo-classes apply to "elements", not just links specifically. IE may be the only browser that restricts them exclusively to links but the general concensus seems to be that it is wrong in doing that.
Charles
08-23-2004, 08:09 AM
Originally posted by ray326
The :hover, :active and :focus pseudo-classes apply to "elements", not just links specifically. IE may be the only browser that restricts them exclusively to links but the general concensus seems to be that it is wrong in doing that. What tripped me up is that the section on these pseudo-classes is contiguous with the link pseudo-classes and that all the examples apply to links. But the spec. is clear. They should apply to most all body elements. (http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes)

There is, alas, a great deal of stuff in CSS2 that is not implemented by MSIE.
rsd
08-23-2004, 01:08 PM
Maybe you could use a little DHTML and put a mouseover and mouseout to change the bgcolor?