Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Seperates CSS für ein verlinktes Bild“

S

Seppolino

Guest

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:

CSS:
<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>

HTML:
<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
 
Zuletzt bearbeitet von einem Moderator:

hub

nicht ganz neu hier

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

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

Gruß Ulli
 
S

Seppolino

Guest

Hi Ulli,

das hatte leider keinen Effekt. Ich hab noch erfolglos das versucht:
CSS:
.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:
CSS:
.demo img {border-bottom:1px solid #bdb7a4; }

Viele Grüße
Seppo
 
Zuletzt bearbeitet von einem Moderator:
S

Seppolino

Guest

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

Nicht mehr ganz neu hier

<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

nicht ganz neu hier

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
 

Aelfry

Web Developer

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:
CSS:
#main .demo a:hover img {opacity:1; filter:alpha(opacity=100);}
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.158
Beiträge
2.581.874
Mitglieder
67.225
Neuestes Mitglied
Petra
Oben