✔ CSS a:hover in Opera

[DaRealMC]

Ich hab bei einer Seite einen hover-Effekt für alle Links angelegt

a:hover {
 color: #2B3052;
 background-color: #000000;
 text-decoration: none;
}

#menu {
    width:152px;
    height:52px;
    background: #A6A6A6;
    border-style: solid;
    border-width: 1px;
    border-color: #000000;
}

.grau {  }
a:Hover .grau {filter: gray();
}

Das funktioniert so weit auch problemlos in IE, FF, Mozilla und Opera. Das Problem ist aber, dass das ja auch bei Bilder-links greift.
Bis auf Opera zeigt keiner einen schwarzen Rahmen um die Grafik an (wobei das beim Mozilla auch nicht ganz einfach war). Nun möchte ich, dass der Rahmen aber auch bei Opera verschwindet.

<div ID="menu"><a href="verweise.html" target="mitte"><img CLASS="grau" src="images/verweise.png" alt="" border="0" /></a></div><br />

 

[Maik]

Der schwarze Rahmen resultiert wohl aus dem DIV#menu. Probier doch mal folgendes:

div#menu img.grau
{
border: 0;
}

[editpost]

Möglicherweise liegt's aber auch an dem schwarzen Hintergrund für den Selektor a:hover

Kannst du die Seite mal online stellen, damit wir das Problem im Opera in Augenschein nehmen können?

 

[DaRealMC]

Es liegt (meiner Meinung nach) am a:hover

http://www.schwarzes-wuerzburg.net

(ty 4 PN)

 

[Maik]

• Eine ID darf in einem Dokument nur einmal vergeben werden.
  Du hast die ID #menu aber mehrmals verwendet
  
  
• Der CSS-Filter filter:gray() wird nur vom IE unterstützt, da er aus dem Hause Microsoft kommt.
  
  
• Aus diesen beiden Punkten resultierend habe ich folgende Modifikationen am CSS- u. HTML-Code vorgenommen, womit der untere schwarze Balken im Opera (8.50) verschwunden ist:

a.menu:hover /* Für non-IE-Browsers */
{
background-color: #2B3052;
}

* html a.menu:hover .grau /* Für IE */
{
filter: gray();
background-color: #2B3052;
}

<div><a href="home.html" class="menu" target="mitte"><img class="grau" src="images/home.png" alt="" border="0" width="130" /></a></div><br />

• Den CSS-Selektor #menu habe ich komplett aus der CSS-Datei css.css entfernt.
  
  
• In dem Script fehlt in der ersten Zeile am Ende das Semikolon:

document.write('<div><a href="home.html" class="menu" target="mitte"><img class="grau" src="images/home.png" alt="" border="0" width="130" /></a></div><br />');

 

[DaRealMC]

Hui, doch so viel Chaos

Danke erstmal. Werds bei Gelegenheit einbaun und testen.

\\edit:
Habs noch nicht eingebaut, aber ich hab das Gefühl, das passt nicht so ganz.
Der Grau-Filter wird nicht nur im Menü verwendet, sondern auch bei den Toplist-Buttons unten.

 

[Maik]

Vier Augen sehen immer mehr, als zwei

 

[Maik]

\\edit:
Habs noch nicht eingebaut, aber ich hab das Gefühl, das passt nicht so ganz.
Der Grau-Filter wird nicht nur im Menü verwendet, sondern auch bei den Toplist-Buttons unten.

Dann musst du lediglich den Grafik-Links (Toplist-Buttons) ebenfalls die Klasse .menu zuweisen:

<a href="http://topsites.meinegruft.de/toplist.htm" class="menu" target="_blank">
                <img class="grau" src="http://www.meinegruft.de/cgi-bin/toplist/topsites.cgi?show=1047" alt="Meine Gruft Top 1000" border="0" /></a>

 

[DaRealMC]

Genau da liegt das Problem. Die Klasse hat eine width und height angabe, die nicht wirklich da rein passt.

Werd wohl noch mal komplett umstellen müssen. Aber ich glaub, das schaff ich dann alleine *hoff*
Wenn nciht, meld ich mich noch mal

 

[Maik]

Ich hatte dir heute Morgen doch unter Punkt 4 mitgeteilt, daß ich den Selektor #menu komplett entfernt habe, somit auch die Breiten- und Höhenangabe, da du die Grafiken mit dem Attribut width='130' dimensioniert hast.

Ansonsten erstellst du für die Toplist-Buttons eine neue CSS-Klasse nach dem von mir gezeigten Schema.

 

[DaRealMC]

Oh, stimmt, sry

Hab einfach grad zu viele Dinge parallel um die Ohren, da geht son kleiner Punkt 4 mal schnell unter