I want to change the background color of a cell when the mouse is put over the cell. I have found that background-color: #000000 will change only the background of the text in the cell. I want the entire cell background to change color, not the background of just the text.
Please help.
-cmotorDefine "cell".You'll have to be a little more clear. From the a:hover in the title of your post, it sounds like you're trying to get a table cell to change color when you mouse over a link inside the cell. Why not just use td:hover (aside from it doesn't work in IE without a weensy javascript workaround)
your css could be something like:td.hov {
width:200px;
height:200px;
background-color:#666666;
behavior:url(IEHover.htc);
}
td.hov:hover, td.hovhover {
/*same style as above, but different color*/
width:200px;
height:200px;
background-color:#662299;
behavior:url(IEHover.htc);
}and IEHover.htc looks like this<public:attach event="onmouseover" onevent="hoverOn()" />
<public:attach event="onmouseout" onevent="hoverOff()" />
<script type="text/javascript">
function hoverOn() {
element.className+= "hover";
}
function hoverOff() {
element.className=element.className.replace(/hover/g, "");
}
</script>By the way, I heard of this approach of working around IE's CSS limitations in Vladdy's pure CSS menu.I think this :
* html td a {width: 100%;}
is the key.
Check it out
<style type="text/css">
td a {
text-decoration:none;
background-color:red;
color:navy;
display:block;
}
* html td a {
width: 100%;
}
td a:hover {
background-color:navy;
color:red;
}
</style>
</head>
<body>
<table>
<tr>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"">This is the first line</a></td>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"">This is the second line</a></td>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"">This is the third line</a></td>
<td ><a href=http://www.webdeveloper.com/forum/archive/index.php/"">This is the fourth line</a></td>
</tr>
<tr>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"">This is the fifth line</a></td>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"">This is the sixth line</a></td>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"">This is the seventh line</a></td>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"">This is the eighth line</a></td>
</tr>
</table>
</body>tag for good info
Please help.
-cmotorDefine "cell".You'll have to be a little more clear. From the a:hover in the title of your post, it sounds like you're trying to get a table cell to change color when you mouse over a link inside the cell. Why not just use td:hover (aside from it doesn't work in IE without a weensy javascript workaround)
your css could be something like:td.hov {
width:200px;
height:200px;
background-color:#666666;
behavior:url(IEHover.htc);
}
td.hov:hover, td.hovhover {
/*same style as above, but different color*/
width:200px;
height:200px;
background-color:#662299;
behavior:url(IEHover.htc);
}and IEHover.htc looks like this<public:attach event="onmouseover" onevent="hoverOn()" />
<public:attach event="onmouseout" onevent="hoverOff()" />
<script type="text/javascript">
function hoverOn() {
element.className+= "hover";
}
function hoverOff() {
element.className=element.className.replace(/hover/g, "");
}
</script>By the way, I heard of this approach of working around IE's CSS limitations in Vladdy's pure CSS menu.I think this :
* html td a {width: 100%;}
is the key.
Check it out
<style type="text/css">
td a {
text-decoration:none;
background-color:red;
color:navy;
display:block;
}
* html td a {
width: 100%;
}
td a:hover {
background-color:navy;
color:red;
}
</style>
</head>
<body>
<table>
<tr>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"">This is the first line</a></td>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"">This is the second line</a></td>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"">This is the third line</a></td>
<td ><a href=http://www.webdeveloper.com/forum/archive/index.php/"">This is the fourth line</a></td>
</tr>
<tr>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"">This is the fifth line</a></td>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"">This is the sixth line</a></td>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"">This is the seventh line</a></td>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"">This is the eighth line</a></td>
</tr>
</table>
</body>tag for good info