change text on mouse over and change back on mouse out

Question

change text on mouse over and change back on mouse out

69.1k Views Asked by Thien At 14 January 2012 at 04:04

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!

Original Q&A

There are 4 best solutions below

ARJUN On 13 July 2014 at 04:25

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>

guysigner On 08 January 2016 at 08:12

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.

small mammal On 12 April 2018 at 01:56

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/

**lambgrp425** · Accepted Answer · 2012-01-14T04:35:38.840000

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>

change text on mouse over and change back on mouse out

There are 4 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in ONMOUSEOVER

Related Questions in ONMOUSEOUT

Trending Questions

Popular # Hahtags

Popular Questions