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

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

• javascript
• css
• hover
• html-table

Share Improve this question Follow edited Feb 21, 2011 at 8:18 Hussein 42.8k2525 gold badges115115 silver badges143143 bronze badges asked Feb 21, 2011 at 5:42 SunnySunny 511 silver badge44 bronze badges 1

• Can you show us what you tried that is not working? – Muhammad Akhtar Commented Feb 21, 2011 at 5:44

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

see the css :hover selector.

In your case:

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

Live demo

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

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>

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/LU9b7/1/