-
Hey Guest. Check out your NeoGAF Wrapped 2025 results here!
background hover + CSS
- Thread starter pnjtony
- Start date
- Status
nope, that still just does it around the text
i got
i got
Code:
<html>
<head>
<style type="text/css">
<style>
table {
width: 500px;
}
td { background-color: yellow;
border: 1px solid black; }
td:hover { background-color: red; }
</style>
</head>
<body>
<table>
<tr>
<td>this is data</td>
</tr>
</table>
</body>
</html>
Tathanen
Get Inside Her!
The hover attribute only works on the A tag in Internet Explorer, while in other browsers you can apply it to any number of other elements. So unless you can fenagle your code to have a block-level A tag fill your entire TD cell and change ITS background, you're SOL in IE.
[Edit] If you aren't worried about IE, though, the solution lies in putting a DIV tag in your TD cell, and applying the formatting to it. CSS applied to a TD is usually processed as inline, so you're going to need a block-level element in there it you want it to naturally span the entire width of the cell.
[Edit] If you aren't worried about IE, though, the solution lies in putting a DIV tag in your TD cell, and applying the formatting to it. CSS applied to a TD is usually processed as inline, so you're going to need a block-level element in there it you want it to naturally span the entire width of the cell.
looks like javascript will be my best bet then
Code:
<html>
<head>
<title>Hover test</title>
<style type="text/css">
<!--
td.test {
border: 1px solid black;
color: black;
background: #cccccc;
padding: 50px;
}
td.test2 {
border: 1px solid black;
color: black;
background: #eeeeee;
padding: 50px;
}
-->
</style>
</head>
<body>
<table summary="test">
<tr><td class="test" onmouseover="this.className='test2'"
onmouseout="this.className='test'">Hello world!</td></tr>
</table>
</body>
</html>CSS
HTML ( you don't need to have a link in there if you dont want...I'm just assuming you want to make buttons.)
Hope this is what you are after
Code:
#button {
background-color: #00CC00;
width: 150px;
}
#button a {
display: block;
padding-top: 5px;
padding-bottom: 5px;
cursor: pointer;
}
#button a:hover {
background-color: #CC0000;
}HTML ( you don't need to have a link in there if you dont want...I'm just assuming you want to make buttons.)
Code:
<div id="button">
<a href="#">button link</a>
</div>Hope this is what you are after
- Status
Similar threads
- Locked