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=http://www.webdeveloper.com/forum/archive/index.php/"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=http://www.webdeveloper.com/forum/archive/index.php/"webmaster.html" target="_blank">
<p align="center"<span style="text-decoration: none">Home</span></a></b></p></td>
<td class="row2"> </td>
<td class="row3"> </td>
<td class="row4"> </td>
<td class="row5"> </td>
<td class="row6"> </td>
<td class="row7"> </td>
<td class="row8"> </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}See this thread (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=42326">http://www.webdeveloper.com/forum/showt ... adid=42326</a><!-- m -->)<!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++) {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>Originally posted by Fang
See this thread (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=42326">http://www.webdeveloper.com/forum/showt ... adid=42326</a><!-- m -->)
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.Originally posted by Ash
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 <!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/.OK">http://www.w3.org/TR/REC-CSS2/.OK</a><!-- m --> sorry all
Yours AshleyAsh 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 (<!-- m --><a class="postlink" href="http://www.xs4all.nl/~peterned/csshover.html">http://www.xs4all.nl/~peterned/csshover.html</a><!-- m -->)Isn't the hover pseudo class supposed to be applicable to all elements, just the IE screws it up (again) ?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.Originally posted by MstrBob
<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes">http://www.w3.org/TR/REC-CSS2/selector. ... do-classes</a><!-- m -->
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:
<!-- w --><a class="postlink" href="http://www.vladdy.net/Demos/IEPseudoClassesFix.htmlOK">www.vladdy.net/Demos/IEPseudoClassesFix.htmlOK</a><!-- w --> thanks guys
Yours AshleyIt 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.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.
I would post something actually useful here, but it seems that everything is said and done.Originally posted by Charles
There is no such thing. the "hover" pseudo class only applies to links. See <!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/">http://www.w3.org/TR/REC-CSS2/</a><!-- m -->. 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.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. (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes">http://www.w3.org/TR/REC-CSS2/selector. ... do-classes</a><!-- m -->)
There is, alas, a great deal of stuff in CSS2 that is not implemented by MSIE.Maybe you could use a little DHTML and put a mouseover and mouseout to change the bgcolor?
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=http://www.webdeveloper.com/forum/archive/index.php/"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=http://www.webdeveloper.com/forum/archive/index.php/"webmaster.html" target="_blank">
<p align="center"<span style="text-decoration: none">Home</span></a></b></p></td>
<td class="row2"> </td>
<td class="row3"> </td>
<td class="row4"> </td>
<td class="row5"> </td>
<td class="row6"> </td>
<td class="row7"> </td>
<td class="row8"> </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}See this thread (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=42326">http://www.webdeveloper.com/forum/showt ... adid=42326</a><!-- m -->)<!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++) {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>Originally posted by Fang
See this thread (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=42326">http://www.webdeveloper.com/forum/showt ... adid=42326</a><!-- m -->)
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.Originally posted by Ash
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 <!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/.OK">http://www.w3.org/TR/REC-CSS2/.OK</a><!-- m --> sorry all
Yours AshleyAsh 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 (<!-- m --><a class="postlink" href="http://www.xs4all.nl/~peterned/csshover.html">http://www.xs4all.nl/~peterned/csshover.html</a><!-- m -->)Isn't the hover pseudo class supposed to be applicable to all elements, just the IE screws it up (again) ?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.Originally posted by MstrBob
<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes">http://www.w3.org/TR/REC-CSS2/selector. ... do-classes</a><!-- m -->
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:
<!-- w --><a class="postlink" href="http://www.vladdy.net/Demos/IEPseudoClassesFix.htmlOK">www.vladdy.net/Demos/IEPseudoClassesFix.htmlOK</a><!-- w --> thanks guys
Yours AshleyIt 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.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.
I would post something actually useful here, but it seems that everything is said and done.Originally posted by Charles
There is no such thing. the "hover" pseudo class only applies to links. See <!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/">http://www.w3.org/TR/REC-CSS2/</a><!-- m -->. 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.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. (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes">http://www.w3.org/TR/REC-CSS2/selector. ... do-classes</a><!-- m -->)
There is, alas, a great deal of stuff in CSS2 that is not implemented by MSIE.Maybe you could use a little DHTML and put a mouseover and mouseout to change the bgcolor?