text ändern bei mouseover und wieder ändern auf die Maus

Ich will eine Tabelle, die ändert sich bei mouseover und die änderungen wieder zurück zu den original-Maus aus. Hier das beste was ich tun kann:

<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>

Aber manchmal, wenn ich die Maus bewegen sich, die Inhalte innerhalb der immer noch nicht ändern zurück zu der ursprünglichen. Gibt es einen besseren Weg, dies zu tun?

Dank!

InformationsquelleAutor Thien | 2012-01-14

  1. 3

    Ich würde so etwas tun:

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

    Hier ein JSFiddle.

    InformationsquelleAutor remdevtec

  2. 1

    Gut, wie Sie angegeben haben, in Frage zu trigger-onmouseover-und onmouseout-Ereignis, so ist es besser, Javascript zu verwenden. Prüfen Sie hier 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>
    Schlechte Nutzung der Funktionen!! Funktion zwei tun das gleiche für nur eine html-id. Nur eine Globale funtion wie setTextOfId(text, id){document.getElementById(id).innerHTML = text;}. Auf diese Weise kann eine Funktion wiederverwendet werden, wie es sollte.
    Ja Marcel, ich bin damit einverstanden, aber ich antwortete hier mit Bezug auf die Frage, die Sie gefragt, mit 2 Funktionen showMore() und showLess().
    ARJUN. Die einzige Frage, die hier gestellt ist gibt es einen besseren Weg, dies zu tun?. Er zeigt nur seinen code für Referenz.

    InformationsquelleAutor ARJUN

  3. 0

    CSS-only-option, die verhindert, dass Spalten der Tabelle (oder einem anderen element enthalten) dynamisch Größenänderung durch text ändern auf hover. Breite ist immer die Länge des längsten text.

    CSS2 nur.

    <!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>

    Geige von oben: https://jsfiddle.net/punxphil/mckbrscd/

    InformationsquelleAutor small mammal

Schreibe einen Kommentar