✔ [CSS]Hintergrundfarbe bei MouseOver ändern...

Status
Nicht offen für weitere Antworten.
M

murdi

Erfahrenes Mitglied
Guten Tag zusammen,

anbei zwei Grafiken, die erste ist der derzeitige Stand, die zweite Grafik die Wunschvorstellung ( gelb eingefärbt ).

Ich möchte beim auslösen der Aktion Mouseover keine ganze Zeile einer Tabelle einfärben, sondern nur die erste und letzte Spalte ( die Zeile ist gedrittelt ).
Mir ist zwar bekannt, wie ich eine ganze Zeile färbe, jedoch um den eben erwähnten Vorgang umzusetzen fehlt mir schlichtweg das Wissen.

Vielleicht kann mir einer von euch weiter helfen.
Danke, murdi.
 

Anhänge

  • link_out.gif
    link_out.gif
    415 Bytes · Aufrufe: 172
  • link_over.gif
    link_over.gif
    475 Bytes · Aufrufe: 169
Hallo!

Dazu müssten die Zellen verbunden werden, dann ist es aber wieder eine Zelle.
Ich würde die einzelnen Bildelemente zu einem zusammenfügen und für a:link bzw. a:hover als Background-Image in die Zelle legen.

Kann zwar sein dass es evtl. auch mit JavaScript machbar ist, davon würde ich jedoch abraten, da der User JS deaktiviert haben könnte.

Gruss Dr Dau
 
Erfolgreich getestet mit FF 1.0, OP 8.01, NS 7.1.
Funktioniert nicht mit IE 6.0.
Code: 
tr td {
    background:#fff;
}

tr:hover>td {
    background:#f00;
}

tr:hover>td+td {
    background:#fff;
}

/* Hier müssen so viele td's mit +
   verknüpft stehen, wie Du Spalten hast
   in diesem Fall 4 Spalten */
tr:hover>td+td+td+td {
    background:#f00;
}
Gruß hpvw
 
Noch ist der IE aber der meist genutzte Browser und zudem auch noch von Haus aus bei Windows mit bei.
Wenn überhaupt könnte es nur eine Lösung für zukünftige Browser sein.

Sieht aber interessant aus.... dass gannze noch hübsch in eine Klasse verpackt und man kann sicherlich schöne Effekte damit hinbekommen. ;)
 
Für den IE wird es keine Lösung ohne JavaScript geben (außer man verwendet keine Tabellen).
Da ich mit JavaScript relativ wenig am Hut habe, habe ich es mir erspart auch noch eine Version für den IE zu machen

Ich habe das ganze noch mal in eine vollständige eigenständige HTML-Datei gesteckt, zum ausprobieren:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type"
    content="application/xhtml+xml; charset=UTF-8" />
<title>Table-Test</title>
<style type="text/css" media="screen">
body                                  {font-family: sans-serif; }
table.hoverTable tr td                { background:#fff;        }
table.hoverTable tr:hover>td          { background:#f00;        }
table.hoverTable tr:hover>td+td       { background:#fff;        }
table.hoverTable tr:hover>td+td+td+td { background:#f00;        }
</style>
</head>
<body>
<table class="hoverTable">
    <tr>
        <td>Spalte <b>1</b></td>
        <td>Spalte <b>2</b></td>
        <td>Spalte <b>3</b></td>
        <td>Spalte <b>4</b></td>
    </tr>
    <tr>
        <td>Spalte <b>1</b></td>
        <td>Spalte <b>2</b></td>
        <td>Spalte <b>3</b></td>
        <td>Spalte <b>4</b></td>
    </tr>
    <tr>
        <td>Spalte <b>1</b></td>
        <td>Spalte <b>2</b></td>
        <td>Spalte <b>3</b></td>
        <td>Spalte <b>4</b></td>
    </tr>
    <tr>
        <td>Spalte <b>1</b></td>
        <td>Spalte <b>2</b></td>
        <td>Spalte <b>3</b></td>
        <td>Spalte <b>4</b></td>
    </tr>
</table>
</body>
</html>
Und nun zum IE in diesem speziellen Fall.
Du benötigst für so eine Art von Menü, ich denke, das soll es sein, keine Tabelle, sondern solltest es besser als Liste auszeichnen. Dann klappts auch mit dem IE.
Hier ein Beispiel, getestet mit IE 6.0, FF 1.0, OP 8.01, NS 7.1:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type"
    content="application/xhtml+xml; charset=UTF-8" />
<title>List-Test</title>
<style type="text/css" media="screen">
body {font-family: sans-serif; }
#menu {
    list-style-type:none;
    margin:0;
    padding:0;
}
#menu li a {
    display:block;
    width:6em;
    margin:2px;
    padding:0;
    border-right:2px #999 solid;
    background:#eee url('./normal.gif') 0 0.4em no-repeat;
    text-decoration:none;
}
#menu li a span {
    background:#eee;
}
#menu li a:hover {
    border-right:2px #f00 solid;
}
#menu li a:hover span {
    background:#f00;
}


</style>
</head>
<body>
<ul id="menu">
    <li><a href="#"><span>&rArr;</span>Item 1</a></li>
    <li><a href="#"><span>&rArr;</span>Item 2</a></li>
    <li><a href="#"><span>&rArr;</span>Item 3</a></li>
    <li><a href="#"><span>&rArr;</span>Item 4</a></li>
</ul>
</body>
</html>
Gruß hpvw
 
OK, und nun ich.
Aufgebaut ist die Tabelle wie schon zuvor angedeutet.
Als Grafiken habe ich die von murdi angehängten verwendet.
Getestet mit IE 5.5, NS 7.1, Mozilla 1.7.5 und Opera 7.54.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Navigationsleiste - Beispiel 1</title>
<style type="text/css">
#navtable a
 {
 text-decoration: none;
 }
.navigation a:link
 {
 background-image: url(link_out.gif);
 text-decoration: none;
 height: 37px;
 width: 159px;
 }
.navigation a:hover
 {
 background-image: url(link_over.gif);
 color: #ffffff;
 text-decoration: none;
 height: 37px;
 width: 159px;
 }
</style>
</head>
<body>
	 <table id="navtable" border="0" cellpadding="0" cellspacing="0">
	  <tr>
	   <td class="navigation">
		 <a href="seite1.html">&nbsp;</a>
	   </td>
	  </tr>
	  <tr>
	   <td class="navigation">
		 <a href="seite2.html">&nbsp;</a>
	   </td>
	  </tr>
	  <tr>
	   <td class="navigation">
		 <a href="seite3.html">&nbsp;</a>
	   </td>
	  </tr>
	  <tr>
	   <td class="navigation">
		 <a href="seite4.html">&nbsp;</a>
	   </td>
	  </tr>
	 </table>
</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück