• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

<tr> verliert Focus wenn die Maus über den Rahmen geht

G

Gokar

Neues Mitglied
Hallo Community,

habe wieder eine kleine Frage. Dies mal zu einem Fallbeispiel, dass Euch sicher zum Hals raushängt: markieren einer aktiven Tabellenzeile beim 'onmouseover'-Event. Zudem soll dabei ein Image sichtbar gemacht werden, das einen Link zur Bearbeitung beinhalten soll.
Funktioniert auch jetzt erst mal, sowohl das Einfärben, als auch die Anzeige des 'Buttons'.

Problem hierbei jetzt nur:

Das 'onmouseleave'-Event setzt bereits ein wenn der Zeiger sich auf dem Tabellenrahmen befindet, also sobald er aus dem Range eines <td>-Elements bewegt wird. Sobald also der Mauszeiger (zu schnell) über eine Zelle hinweg zur nächsten gleitet verliert die Zeile die Markierung und der 'Button' ist weg.
Wie würdet Ihr mir raten das zu lösen? Position des Mauszeigers erfragen und prüfen, ob dieser sich im Range des <tr>-Elements befindet oder gleich andere Ereignisse, als 'onmouseleave' wählen?

Coding folgt. Die Tabelle wird später per php-Schleife gefüllt, hier nur ein Beispielsatz:

Code: 
<script type="text/javascript">
    function highlight_cell(cell)
    {
        cell.cells.item(0).bgColor = "darkorange";
        cell.cells.item(cell.cells.length - 1).style.visibility = "visible";
    }
    
    function reset_cell(cell)
    {
        cell.cells.item(0).bgColor = "darkgrey";
        cell.cells.item(cell.cells.length - 1).style.visibility = "collapse";
    }
</script>

HTML: 
<table border="1" class="search_result">
    <tr>
        <th bgcolor="white" height="30px">Spalte 1</th>
        <th bgcolor="white">Spalte 2</th>
        <th bgcolor="white">Spalte 3</th>
        <th bgcolor="white">Spalte 4</th>
    </tr>
    <tr onmouseover="highlight_cell(this)" onmouseleave="reset_cell(this)">
        <td bgcolor="darkgrey">Zelle A 1</td>
        <td bgcolor="darkgrey">Zelle B 1</td>
        <td bgcolor="darkgrey">Zelle C 1</td>
        <td width="5px" style="visibility:collapse"><a href="#"><img src="edit.png" alt="Bearbeiten"></a></td>
    </tr>
</table>


Danke und beste Grüße,

Gokar
 
In welchem Browser tritt das Problem auf?

Du könntest bis zu einer gewissen Komplexität auch mit der :hover-Pseudoklasse arbeiten. tr:hover .controls { visibility: visible; }
 
Das scheint irgendwie am cellspacing zu hängen.

table { border-collapse: collapse; } sollte helfen.

- http://www.quirksmode.org/css/tables.html

Das geht dann sicher auch mit JS, aber warum nicht mal so probieren:

HTML: 
<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <title>Demo</title>

        <style>
/*<![CDATA[*/

table {
    border-collapse: collapse;
}

tr:hover td {
    background: red;
}

tr .controls {
    visibility: hidden;
}

tr:hover .controls {
    visibility: visible;
}
/*]]>*/
        </style>
    </head>

    <body>



<table border="1" class="search_result">
    <tr>
        <td>Zelle A 1</td>
        <td>Zelle B 1</td>
        <td>Zelle C 1</td>
        <td><span class="controls"><a href="#"><img src="edit.png" alt="Bearbeiten"></a></span></td>
    </tr>
</table>

    </body>

</html>
 
onmouseout statt onmouseleave hat keine Veränderung gebracht; wäre auch komisch gewesen. Aber Überraschungen sind ja bei so was immer geboten.

So, dann schau ich mal, was mermshaus gezaubert hat: FUNKTIONIERT prima (auch mit JS), Dankeschön! : )

This declaration takes two values:

  1. separate: keep borders separate. This is the default.
  2. collapse: merge borders of adjoining cells.
Zum Vergrößern anklicken....


Ich bedanke mich bei Euch! :)
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben