Hintergrundbild verändern

  • 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.

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

    if(!sleep)

    {$sheep++;}

  • 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.

  • Danke ich habe es jetzt mit diesem CSS realisiert:

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

    Das funktioniert auch toll.

  • 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.

  • 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.

    if(!sleep)

    {$sheep++;}

  • 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. ;);)