Hintergrundbild verändern

Spider67

Hallo,

ich habe ein Listelement mit beiliegendem Hintergrundbild ausgezeichnet .

Das Listelement enthält einen Hyperlink (zB. "Startseite"), wobei der Text kürzer ist als das Hintergrundbild.

Ich kann also weder das Hintergrundbild zum eigentlichen Link machen noch mit den Pseudoklassen arbeiten, da diese nur den Linktext ansprechen.

Wenn ich den Link um das ganze "li-element" lege, kann ich keinen Text angeben, das das Bild dann im Vordergrund ist.

Wie schaffe ich es, dass beim Anklicken des Linktextes trotzdem das Hintergrundbild verändert wird? DAs sollte mit JS funktionieren, ich blick aber nicht durch.

Ich hoffe mein Wunsch ist halbwegs verständlich erklärt, und danke für Eure Hilfe.

Grüße aus Österreich.

Sailor

So wirklich verstehe ich nicht, was dein Problem ist - aber vergiss mal die Formatierungversuche mit dem <li>, sondern geh mal auf das <a> los....

Code

a {
   display: block;
   width: 121px;
   height: 22px;
   background-image: url('flurl_button-1.jpg');
   background-repeat: no-repeat;
   background-size: cover;
   color: #fff;
   text-decoration: none;
   text-align: center;
   line-height: 22px;
   }
a:hover {
   background-image: url('ein _anders_bild.jpg');
   color: #f00;
   }

Alles anzeigen

Spider67

Hallo,

vielen Dank das funktioniert (ist ja auch nur eine Spielerei).

Eine Frage noch dazu. Nachfolgend findest Du mein HTML. Wie kann ich im nav Container jetzt die a Elemente selektieren, ohne dass das letzte a Element (a href: mailto:) auch selektiert wird. Dort möchte ich den .hover Effekt nicht haben. Ich habe es im CSS mit nav li a versucht, aber das funktioniert nicht.

Danke für die Hilfe.

Code

<nav role="navigation" class="pagenav">
        <img src="../../bilder/logo_zander_animiert.gif" alt="schwimmender Zander"/>
        <br>
        <br>
        <ul>
            <li class="button"><a href="../../hauptseite.htm">Startseite</a></li>
            <li class="button"><a href="der_verein.htm">Der Verein</a></li>
            <li class="button"><a href="bestimmungen neu.html">Bestimmungen</a></li>
            <li class="button"><a href="Anmeldeformular.html">Anmeldeforumlar</a></li>
            <li class="button"><a href="Liste-Mitglieder.htm">Liste Mitglieder</a></li> 
            <li class="button"><a href="veranstaltungen.htm">Veranstaltungen</a></li>
            <li class="button"><a href="bildergalerie.htm">Bilder</a></li>
            <li class="button"><a href="Fun_und_Unterhaltung.htm">Fun/Unterhaltung</a></li>
            <li class="button"><a href="Archiv.htm">Archiv</a></li>
            <li class="button"><a href="links.htm">Links</a></li>
            <li class="button"><a href="termine.htm">Gästebuch</a></li>
            <li class="button"><a href="../../html/Link_in_Arbeit.html">Chat</a></li>
            <li class="button"><a href="forum.htm">Forum</a></li>
            <li class="button"><a href="Vorstand/Vorstandsbereich_neu.html">Vorstand</a></li>
        </ul>
        <div class="mail"><a href="mailto:"><img border="0" src="../Bilder/Email_78_9kb.gif"></a></div>
    </nav>

Alles anzeigen

basti1012

da gibt es mehrere möglichkeiten.

zb mit not https://developer.mozilla.org/de/docs/Web/CSS/:not

oder besser ist ,

wenn du die a Elemente mit den ClassNamen an sprechen tust .

Da der mail ja eine andere Klasse hat ist das kein problem

zb

Code

.button
oder auch 
.button a

für dein mail ding dann

Code

.mail
oder auch
.mail a

Spider67

Danke ich habe es jetzt mit diesem CSS realisiert:

Code

div .mail:first-child {
    text-decoration: underline;
    background: #000066;
}

Das funktioniert auch toll.

basti1012

Warum :first-child `?

hast du noch mehr Elemente die mail heisen ?

Wenn ja dann ok , aber wenn nicht dann brauchst du das eigentlich nicht

Spider67

wie man oben sieht ist das betreffende a-Element das erste Kindelement des div mit der Class Mail. Ich brauche dieses div jedoch bezüglich der Positionierung des Elements im nav Bereich.

Daher habe ich diesen Selektor gewählt. Aber was meinst Du? Welcher Selektor würde Deiner Meinung nach genügen?

Danke für die Hilfe.

Sailor

Dein CSS...

Code

div .mail:first-child {
    text-decoration: underline;
    background: #000066;
}

ist auf jeden Fall nicht richtig und ich sehe nicht, dass der bei dir, wie du sagst 'funktioniert auch toll'!

Mit deinem Selektor sprichst du das erste Kindelement mit der Klasse 'mail' innerhalb eines Elternelementes <div> an ... das gibt es in deinem Code (so wie er oben steht) aber gar nicht.

Wenn du etwas ansprechen willst, dann musst du auch dieses Element beim Namen nennen .. also 'a' (ggf mit der Klasse, wenn es denn eine hat).

Und dieses Element befindet sich in dem div mit der Klasse 'mail' ... also 'div.mail' ... ohne Leerzeichen.

Und da dein gewünschtes 'a' sowieso das einzige a-Element in diesem div ist, kannst du dir das :first-child sparen.

Der Selektor wäre dann einfach...

Code

div.mail a

oder auch einfach

.mail a

Das hat basti1012 dir aber auch schon in #4 geschrieben.

Spider67

Alles klar, danke. Ich verstehe das. Das Leerzeichen war also falsch.

Es hatte aber trotzdem den gewünschten Effekt. Danke jedenfalls für die Hilfe. Ich melde mich sicher wieder bald.