Change Text On Mouse Over And Change Back On Mouse Out

Question

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:

Solution 1:

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>

Solution 2:

I would do something like this:

<td 
   onmouseover="this.innerHTML='this is awsome';"
   onmouseout="this.innerHTML='this is sick';">
   this is sick
</td>

Here's a JSFiddle.

Solution 3:

Well, as you specified in Question to trigger onmouseover and onmouseout event so it is better to use Javascript. Check here Fiddle

<!DOCTYPE html>
<head>
<title>change text on mouse over and change back on mouse out
</title>
 <script type="text/javascript">
    function changeText(text)
        {
            var display = document.getElementById('text-display');
            display.innerHTML = "";
            display.innerHTML = text;
        }
          function changeback(text)
        {
            var display = document.getElementById('text-display');
            display.innerHTML = "";
            display.innerHTML = text;
        }
    </script>
<style>
#box {
float: left;
width: 150px;
height: 150px;
margin-left: 20px;
margin-top: 20px;
padding: 15px;
border: 5px solid black;
}
</style>
</head>
<html>

<body>
<div id="box" onmouseover="changeText('Yes, this is Onmouseover Text')" onmouseout="changeback('any thing')" >

<div id="text-display" >
any thing 
</div>

</div>
</body>
</html>

Solution 4:

CSS only option that prevents table columns (or other containing element) dynamically resizing due to text changing on hover. Width is always length of longest text.

CSS2 only.

<!doctype html>
<html lang="en">

<head>
    <style>
    .flip>span {
        color: transparent;
        float: none;
    }

    .flip:hover>span {
        color: black;
        float: left;
    }

    .flip>span:first-child {
        color: black;
        float: left;
    }

    .flip:hover>span:first-child {
        color: transparent;
        float: none;
    }
    </style>
</head>

<body>
    <table border='1'>
        <tr>
            <td class="flip">
                <span>normal text</span>
                <span>hover text</span></td>
            <td>col 2</td>
        </tr>
        <tr>
            <td class="flip">
                <span>other normal text</span>
                <span>other hover text</span></td>
            <td>col 2</td>
        </tr>
    </table>
</body>

</html>

Fiddle of above: https://jsfiddle.net/punxphil/mckbrscd/

Html5 Ready

Change Text On Mouse Over And Change Back On Mouse Out

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Post a Comment for "Change Text On Mouse Over And Change Back On Mouse Out"