Login/Register
change text on mouse over and change back on mouse out
Asked Answered
Solved javascripthtmlonmouseoveronmouseout
L

4

6

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!

Lanny answered 14/1, 2012 at 4:4 Comment(0)
B
22

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>
Bathypelagic answered 14/1, 2012 at 4:35 Comment(1)
How can I do this with inline css. Im trying to accomplish this using React :/ – Trainload
A
7

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.

Agamemnon answered 8/1, 2016 at 8:12 Comment(0)
K
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>
Kampmeier answered 13/7, 2014 at 4:25 Comment(3)
Bad use of functions!! Two function do the exact same thing for only one html id. Just make a global funtion like setTextOfId(text, id){document.getElementById(id).innerHTML = text;}. This way a function can be reused as it should. – Saltatory
Yes Marcel, I agree but I answered here with respect to the question they asked with 2 functions showMore() and showLess(). – Kampmeier
ARJUN. The only question asked here is Is there a better way to do this?. He only shows his code for reference. – Saltatory
M
1

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/

Melantha answered 12/4, 2018 at 1:56 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.