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#line1span#a {
  display: inline;
}

div#line1:hoverspan#a {
  display: none;
}

div#line1span#b {
  display: none;
}

div#line1:hoverspan#b {
  display: inline;
}

<divid="line1"><tableborder="1"><tr><td><spanid="a">this is sick</span><spanid="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';">
   thisis 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><scripttype="text/javascript">functionchangeText(text)
        {
            var display = document.getElementById('text-display');
            display.innerHTML = "";
            display.innerHTML = text;
        }
          functionchangeback(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><divid="box"onmouseover="changeText('Yes, this is Onmouseover Text')"onmouseout="changeback('any thing')" ><divid="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><htmllang="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><tableborder='1'><tr><tdclass="flip"><span>normal text</span><span>hover text</span></td><td>col 2</td></tr><tr><tdclass="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/

Stack in Html5

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"