✔ Tabellenzeilen bei Mouseover hervorheben

lexyart

lexyart

Grünschnabel
Hallo,

ich würde gerne beim Mouseover über eine Tabellenzeile, diese durch eine andere Farbe und unterstreichen hervorherben. Habe es soweit auch geschafft aber leider werden Links nicht farblich und unterstrichen hervorgehoben wenn man drüber geht.

Weiß nicht ob mir extra Befehle da noch abgehen hier wäre der Quellcode:

Code: 
<html>
<head>
<title></title>
<script language="JavaScript">
function marklist(i){
i.bgColor='#cccccc';
i.style.color='#000000';
i.style.textDecoration='underline'
}
function demarklist(i){
i.bgColor='#000000';
i.style.color='#ffffff';;
i.style.textDecoration='none';
}
</script>
</head>
<body alink="#ffffff" link="#ffffff" vlink="#ffffff" text="#ffffff">

<table bgcolor="#000000">
  <tr onMouseOver="marklist(this);" onMouseOut="demarklist(this);"> 
    <td bordercolor="#FF0000">Mitgliedsnr</td>
    <td bordercolor="#FF0000"><a href="" style="text-decoration:none;">Nickname</a></td>
    <td bordercolor="#FF0000"><a href="" style="text-decoration:none;">Vorname Name</a></td>
    <td bordercolor="#FF0000"><a href="" style="text-decoration:none;">Fahrzeug</font></a></td>
    <td bordercolor="#FF0000"><a href="" style="text-decoration:none;">04/2005</a></td>
  </tr>
</table>
  
</body>
</html>

Kann mir wer helfen? Danke!
 
Hi,

da es sich bei den Links um andere Objekte handelt, als sie über this übergeben werden,
können sie nicht so einfach angesprochen werden. Ein "Durchhangeln" durch den Elementbaum
wäre sicherlich möglich, aber doch recht aufwendig.

Mein Lösungsvorschlag wäre folgender:
Du erstellst zwei CSS-Klassen. Die erste definiert das Aussehen der Zeile und der Links im
Standardzustand. Die andere entsprechend die Formatierungen für den hervorgehobenen Zustand.
Im mouseover- bzw. mouseout-Event änderst du entsprechend die Klasse über className.
HTML: 
<html>
<head>
<title>www.tutorials.de</title>
<style type="text/css">
  <!--
/* Tabellenzeile im Standardzustand */
.normTR{ background: #000;
         color: #fff;}
/* Link-Formatierungen im Standardzustand */
.normTR a{ color: #fff;
           text-decoration: none;}
/* Tabellenzeile im hervorgehobenen Zustand */
.highTR{ background: #ccc;
         color: #000;}
/* Link-Formatierungen im hervorgehobenen Zustand */
.highTR a{ color: #000;
          text-decoration: underline;}
 //-->
</style>
</head>
<body alink="#ffffff" link="#ffffff" vlink="#ffffff" text="#ffffff">
<table bgcolor="#000000">
  <tr class="normTR" onmouseover="this.className='highTR';" onmouseout="this.className='normTR';">
    <td bordercolor="#FF0000">Mitgliedsnr</td>
    <td bordercolor="#FF0000"><a href="">Nickname</a></td>
    <td bordercolor="#FF0000"><a href="">Vorname Name</a></td>
    <td bordercolor="#FF0000"><a href="">Fahrzeug</font></a></td>
    <td bordercolor="#FF0000"><a href="">04/2005</a></td>
  </tr>
</table>
</body>
</html>
Vielleicht hilft dir das weiter.

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück