Home/ Questions/Q 7062123
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T04:33:23+00:00

I want to have a table that changes itself on mouse over and changes

  • 0

I want to have a table that changes itself on mouse over and changes back to the original on mouse out. Here the best I can do:

<html>
<body>
<div id="line1">
    <table onmouseover="showMore()" border="1">
        <tr>  
            <td>this is sick</td>
        </tr>
    </table>
</div>

<script>
function showMore(){
    document.getElementById("line1").innerHTML = "<table border='1' onmouseout='showLess()'><tr><td>this is awesome</td></tr></table>";
}

function showLess(){
    document.getElementById("line1").innerHTML = "<table border='1' onmouseover='showMore()'><tr><td>this is sick</td></tr></table>";
}
</script>
</body>
</html>

However, sometimes when I move the mouse out, the content inside the still doesn’t change back to the original. Is there a better way to do this?

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Well, you could certainly do it with CSS – http://jsfiddle.net/32HpH/

    div#line1 span#a {
  display: inline;
}

div#line1:hover span#a {
  display: none;
}

div#line1 span#b {
  display: none;
}

div#line1:hover span#b {
  display: inline;
}
    <div id="line1">
  <table border="1">
    <tr>
      <td>
        <span id="a">this is sick</span><span id="b">this is awesome</span>
      </td>
    </tr>
  </table>
</div>
    • 0