Seperates CSS für ein verlinktes Bild

[Seppolino]

Hallo zusammen,

Vorweg: ich bin ein ziemlicher CSS-Neuling (anpassen klappt ganz gut, selbst erstellen nicht so )
Ich habe ein globales CSS das besagt, dass verlinkte Bilder immer einen Hover-Effekt haben:
#main a:hover img {opacity:0.6; filter:alpha(opacity=60);}

Nun möchte ich diesen Effekt speziell bei Teasern ändern bzw. ausschalten. Dort soll nämlich nicht der Opacity-Hover-Effekt kommen, sondern bei Mouseover nur das Bild wechseln. Das wechseln funktioniert auch einwandfrei, mit onmouseover="this.src.... Allerdings habe ich den Opacity-Effekt immer noch.

Ich habe für das besagte Bild nun eine eigene CSS-Klasse "demo" erstellt und sie direkt in den Code integriert, also nicht ins das externe CSS ausgelagert. Das sieht so aus:

<style title="Teaser_Newsletter">
.demo:link {opacity:1;  filter:alpha(opacity=100) !important;}
.demo:visited {opacity:1;  filter:alpha(opacity=100) !important;}
.demo:hover {opacity:1;  filter:alpha(opacity=100) !important;}
.demo:focus {opacity:1;  filter:alpha(opacity=100) !important;}
.demo:active {opacity:1;  filter:alpha(opacity=100) !important;}
.demo {border-bottom:5px solid #bdb7a4; }
</style>

<div class="demo">
<a href="http://www.seite.de/zielseite/" ><img src="http://www.seite.de/bilder/mouseout.jpg"  onmouseover="this.src='http://www.seite.de/bilder/mouseover.jpg'"  onmouseout="this.src='http://www.seite.de/bilder/mouseout.jpg'" /></a>
</div>

Leider wird immer noch das globale CSS genutzt. Kann mir jemand helfen?

Viele Grüße
Seppo

Hab mal deine Codes formatiert zur besseren Ansicht - Dobi78

 

[hub]

Moin moin und herzlich Willkommen!
Ich denke, dein Problem besteht darin, das du das Falsche ändern willst (div statt a):

.demo:visited {opacity:1; filter:alpha(opacity=100) !important;}
/* zu */
.demo a:visited {opacity:1; filter:alpha(opacity=100) !important;}

Gruß Ulli

 

[Seppolino]

Hi Ulli,

das hatte leider keinen Effekt. Ich hab noch erfolglos das versucht:

.demo a:visited img {opacity:1;  filter:alpha(opacity=100) !important;}

Ich habe das Gefühl, dass mein "demo"-CSS gar keine Wirkung hat. Diese einfache Anweisung hat auch keine Wirkung:

.demo img {border-bottom:1px solid #bdb7a4; }

Viele Grüße
Seppo

 

[Seppolino]

Ich habe es gelöst. Leider etwas unsauber...ich habe alles Inline gemacht:

<a href="" ><img src="'" onmouseover="this.src='''" onmouseout="this.src='''" style="opacity: 1;filter: alpha(opacity=100) !important; border-bottom: 0px solid black !important;" /></a>

Aber es funktioniert.

 

[Enigmon]

<a href="" ><img src="'" onmouseover="this.src='''" onmouseout="this.src='''" style="opacity: 1;filter: alpha(opacity=100) !important; border-bottom: 0px solid black !important;" /></a>

Ist das nur ein Schreibfehler oder hast du 1:1 kopiert?
Bei onMouseover öffnest du mit " dann mit ' und schliesst dann '' und "

LG
Thomas

 

[hub]

Moin,
wenn das funktioniert, liegt es wahrscheinlich an der Reihenfolge, wie du die Css-Dateien eingbunden hast. Sie werden in der Reihenfolge abgearbeitet, wie sie geladen werden, also müsste deine Css Datei als letzte geladen werden um vorherige Parts gleicher oder höherer Qualifizierung zu überschreiben.
Gruß Ulli

 

[Seppolino]

Ist das nur ein Schreibfehler oder hast du 1:1 kopiert?
Bei onMouseover öffnest du mit " dann mit ' und schliesst dann '' und "

LG
Thomas

Das war ein Schreibfehler. Danke!

 

[Aelfry]

Ich habe es gelöst. Leider etwas unsauber...ich habe alles Inline gemacht:

<a href="" ><img src="'" onmouseover="this.src='''" onmouseout="this.src='''" style="opacity: 1;filter: alpha(opacity=100) !important; border-bottom: 0px solid black !important;" /></a>

Aber es funktioniert.

inline ist genau so schlimm wie der Missbrauch von !important...

Dein Problem ist die Spezifität deiner CSS Selektoren, also deren Wertigkeit.

Probier es so:

#main .demo a:hover img {opacity:1; filter:alpha(opacity=100);}