CODEWITHSUNDEEP
javascriptcsshoverhtml-table
Sunny
Sunny

Reputation: 5

coloring a td on mouse hover

I want to add a background color on a td as a mouse hover in smarty.

How can I use create a hover I made a class for hover but its not working.

Help me out

Upvotes: 0

Views: 3102

Answers (4)

Hussein
Hussein

Reputation: 42818

Here you go

td{
    background:red;
    color:white;
    padding:10px;
    border:1px solid white;
}

td:hover{
    background:blue;
}

<table>
    <tr>
        <td>test</td>
        <td>test</td>
    </tr>
</table>

Check working example at http://jsfiddle.net/LU9b7/1/

Upvotes: 0

Yoko Zunna
Yoko Zunna

Reputation: 1824

You can try this....

<style>
td.navon {
background-color: #999999;
cursor: hand}
td.navoff {
background-color: #FFFFFF}
</style>

<table>
  <tr>
    <td class="navoff" onmouseover="className='navon'" onmouseoff="className='navoff'">
      td 1
    </td>
  </tr>
  <tr>
    <td class="navoff" onmouseover="className='navon'" onmouseoff="className='navoff'">
      td 2
    </td>
  </tr>
</table>

Upvotes: 0

Yoko Zunna
Yoko Zunna

Reputation: 1824

<SCRIPT language="JavaScript">
function rollbg(chosen, objectID) {
if(chosen == "roll") {
document.getElementById(objectID).className="roll";
}
else {
document.getElementById(objectID).className="over";
}
}
</SCRIPT>




    <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;
}

    </STYLE>

Upvotes: 0

user180100
user180100

Reputation:

see the css :hover selector.

In your case: 

td.yourClass { background-color: transparent; }
td.yourClass:hover { background-color: red; /* for example */ }

Live demo

Upvotes: 7

Related Questions