✔ mouseover Effekt

B

brainsucker

Erfahrenes Mitglied
Guten Morgen zusammen!

Folgende Fragestellung warf sich mir auf und ich konnte sie leider nicht beantworten. Vielleicht könnt Ihr mir ja helfen:

Ich habe eine Tabelle mit zwei Spalten und mehreren Zeilen. Ich hätte nun gerne den Effekt erreicht, dass beim überfahren der rechten Spalte sich die Hintergrundfarbe des dazugehörigen linken Spaltenbereiches ändert. (Der rechte Spaltenbereich soll so bleiben wie er ist).

Ist so etwas mit CSS möglich oder muss ich hierfür JS bemühen?
 
CSS-Lösung (aber leider nicht IE<=6)
CSS: 
table tbody tr:hover {
  background: #EA0;
}

JS-Lösung:
Javascript: 
// Hovereffect
function over(object) {
  object.style.background = "#EEAA00";
}
// Standard zurücksetzen
function out(object) {
  object.style.background = "#FFFFFF";
}
HTML: 
<table>
  <thead>
    ...
  </thead>  
  <tfoot>
    ...
  </tfoot>  
  <tbody>
    <tr onmouseover="over(this)" onmouseout="out(this)">
      ...
    </tr>
  </tbody>
</table>
 
danke für den hinweis.

2 Anmerkungen dazu:

1. im Firefox tut das leider nicht, beim IE schon

2. er ändert dann aber die hintergrundfarbe der gesamten zeile, ich wollte es eigentlich so haben dass er nur innerhalb der zeile die linke spalte ändert. Ist das auch zu realisieren ?
 
Ich bräuchte nochmal Hilfe.

Diese Funktion funktioniert super, allerdings möchte ich sie jetzt noch etwas erweitern:

Code: 
// Hovereffect
function
 over(object) {  object.style.background = "#EEAA00";}
// Standard zurücksetzen
function out(object) 
{  object.style.background = "#FFFFFF";}

Ich habe nun eine Tabelle bei der sich die Hintergrundfarbe der einzelnen Zeilen immer abwechseln. (#000000,#CCCCCC,#000000,#CCCCCC,#000000,#CCCCCC,#000000,#CCCCCC....)

Nun möchte ich dass beim drüberfahren mit der Maus (mouseover) sich die Farbe auf #FFEB85 ändert. Beim verlassen des Mauszeigers (mouseout) soll dann aber wieder die ursprüngliche Farbe wiederhergestellt werdeb. D.h. was vorher #cccccc war muss danach auch wieder #cccccc sein.

Der Aufruf erfolgt so:

PHP: 
<tr  bgcolor="<? echo $bgcolor; ?>"onmouseover="over(this)" onmouseout="out(this)">

Könnte mir da jemand helfen, ich hab schon versucht der Funktion die Variable bgcolor zu übergeben, allerdings wird das wohl nicht funktionieren, da die variable ja serverseitig erzeugt wurde.
 
Zuletzt bearbeitet:
Hi,

auch wenn ich nicht unmittelbar auf deine letzte Frage eingehe - ist es für dich noch interessant, nur den Hintergrund der linken Spalte zu ändern?

Hier mein Lösungsvorschlag:
Zunächst werden CSS-Klassen (.row1 und .row2) erstellt, die für die alternierenden Zellenfarben verantwortlich sind.
Wird die Maus über eine rechte Zelle bewegt, wird der linken Zelle eine Extra-Klasse mit der gewünschten Hintergrundfarbe zugewiesen (beachte das !important). Wird die Zelle wieder verlassen, wird die Klasse wieder entfernt.
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
// Hovereffect
function over(object){
  // Zeilenelement ermitteln
  while(object.nodeName.toUpperCase() != "TR"){
    object = object.parentNode;
  }

  object.cells[0].className = "highlightClass";
}
// Standard zurücksetzen
function out(object){
  // Zeilenelement ermitteln
  while(object.nodeName.toUpperCase() != "TR"){
    object = object.parentNode;
  }

  object.cells[0].className = "";
}
 //-->
</script>
<style type="text/css">
  <!--
.row1 td{ background: #ccc;
          color: #000;}
.row2 td{ background: #000;
          color: #fff;}
.highlightClass{ background: #FFEB85 !important;}
 //-->
</style>
</head>
<body>
<table>
  <tr class="row1">
    <td>(0,0)</td>
    <td onmouseover="over(this)" onmouseout="out(this)">(0,1)</td>
  </tr>
  <tr class="row2">
    <td>(1,0)</td>
    <td onmouseover="over(this)" onmouseout="out(this)">(1,1)</td>
  </tr>
  <tr class="row1">
    <td>(2,0)</td>
    <td onmouseover="over(this)" onmouseout="out(this)">(2,1)</td>
  </tr>
</table>
</body>
</html>
Vielleicht kannst damit etwas anfangen.

Ciao
Quaese
 
Hi Quaese ,

danke für dein Script, ich werde es mal ausprobieren. Als erstes muss ich aber das Problem aus meinem vorhergehenden Post lösen, leider fehlt mir hier noch immer die zündende Idee.

Hoffe es kann mir einer helfen!
 
Hi,

durchlaufe beim mouseover-Event alle Zellen einer Zeile und weise diesen eine Hintergrundfarbe zu. Im mouseout-Event entfernst du entsprechend diese Farbe wieder.
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
// Hovereffect
function over(object){
  for(var i=0; i<object.cells.length; i++){
    object.cells[i].style.backgroundColor = "#FFEB85";
  }
}
// Standard zurücksetzen
function out(object){
  for(var i=0; i<object.cells.length; i++){
    object.cells[i].style.backgroundColor = "";
  }
}
 //-->
</script>
<style type="text/css">
  <!--
.row1 td{ background: #ccc;
         color: #000;}
.row2 td{ background: #000;
          color: #fff;}
 //-->
</style>
</head>
<body>
<table>
  <tr class="row1" onmouseover="over(this)" onmouseout="out(this)">
    <td>(0,0)</td>
    <td>(0,1)</td>
  </tr>
  <tr class="row2" onmouseover="over(this)" onmouseout="out(this)">
    <td>(1,0)</td>
    <td>(1,1)</td>
  </tr>
  <tr class="row1" onmouseover="over(this)" onmouseout="out(this)">
    <td>(2,0)</td>
    <td>(2,1)</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