kostenloser Webspace werbefrei: lima-city


CSS Hover anderes Element ändern

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    m****r

    Hi,

    also ich bin ja wirklich kein Anfänger mehr in CSS, aber irgendwie stehe ich hier gerade auf dem Schlauch. Ich habe zwei Elemente A und B. Bei B:hover möchte ich, dass A seine background-color ändert. Ist soetwas in CSS überhaupt möglich? Ist ja sone Art Querverweis zwischen zwei html Elementen, die mit CSS angesprochen werden können. Nur wüsste ich nicht das es geht. Wenns nicht geht: Wie mach ich das dann mit nur HTML und CSS?

    Der Grund ist n ganz simpler: Ich hab ne normale Navigation, in der ich mit ul und li eine Linkliste darstelle, die ich dann über float:left; formatiere und "schön" gestalte. Ich möchte, dass über die gesamte Navigation (100%width von body) unten ein border:thin solid black; besteht, allerdings bei jedem li der navigation bei li:hover eben der Border unten verschwindet. Wie mache ich das?

    Dankeschön.
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. g****e

    Ganz einfach:
    #element1 {
    //ganz schön gemacht
    }
    #element2 {
    //ganz schön gemacht
    }
    #element2:hover #element1 {
    background-color: #FFFFFF;
    }


    http://lmgtfy.com/?q=css+hover+anderes+element+%C3%A4ndern

    Liebe Grüße
  4. ggamee schrieb:
    Ganz einfach:
    #element1 {
    //ganz schön gemacht
    }
    #element2 {
    //ganz schön gemacht
    }
    #element2:hover #element1 {
    background-color: #FFFFFF;
    }


    http://lmgtfy.com/?q=css+hover+anderes+element+%C3%A4ndern

    Liebe Grüße


    Aber soweit ich weiß nur, wenn #element1 sich in #element2 befindet:
    <div id="element2">
    <div id="element1">
    </div>
    </div>
  5. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    Was aber nicht möglich ist ist, dass das Patent-Element etwas ändert weil beim Child ein :hover stattfindet.
    Grund: mit CSS lassen sich keine Parents auswählen, sondern nur Childs.
  6. Autor dieses Themas

    m****r

    copynpaste schrieb:
    ggamee schrieb:
    Ganz einfach:
    #element1 {
    //ganz schön gemacht
    }
    #element2 {
    //ganz schön gemacht
    }
    #element2:hover #element1 {
    background-color: #FFFFFF;
    }


    http://lmgtfy.com/?q=css+hover+anderes+element+%C3%A4ndern

    Liebe Grüße


    Aber soweit ich weiß nur, wenn #element1 sich in #element2 befindet:
    <div id="element2">
    <div id="element1">
    </div>
    </div>


    Und genau das ist das Problem! B befindet sich nämlich nicht in A! Gibt es da einen CSS Workaround?
  7. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    Also wenn es das gäbe würdest du es hier finden... aber das gibts leider nicht.
  8. g****e

    Tut mir leid, das stimmt natürlich, dass man nur children damit beeinflussen kann. Tut mir leid, dass ich das nicht genannt habe.
    Ich dachte eigentich an so eine ähnliche Struktur:
    <style type="text/css">
    #element2 { display:none; }
    #element4 { display:none; }
    #element3 { width:250px; }
    #element:hover #element2 { display:block; }
    #element2:hover #element4 { display:block;float:right; }
    </style>
    
    <div id="element">Hier drauf
    	<div id="element2">element11<br/>element21<br/>
    
    		<div id="element3">element31
    			<div id="element4">element12</div>
    		</div>
    
    	</div>
    
    </div>

    Damit kann man wunderbar Menüs aufbauen, find ich. Ansonsten wirst du wohl auf Javascript zurückgreifen müssen :-S

    Liebe Grüße
  9. h******g

    CSS = Cascading Style Sheets
    kaskadierend = von OBEN nach UNTEN
    sollte eigentlich klar sein, dass das nicht geht.
  10. Da benutzt du am besten Javascript und dann schau unter onmouseover // onmouseenter // onmouseout (onmouseleave).

    Gruß Snix
  11. snix schrieb:
    Da benutzt du am besten Javascript und dann schau unter onmouseover // onmouseenter // onmouseout (onmouseleave).

    Gruß Snix


    Jap.. Dazu rate ich dir auch. Sowas ist mir nämlich schon öfters versehentlich passiert als ich ain normales hover machen wollte.. :biggrin:
  12. Allerdings muss man immer dran denken, dass der Besucher der Seite Javascript im Browser deaktiviert haben könnte und somit nicht viel weiter als bis zur Startseite kommt..
    Ich würde dir hier wirklich raten ggamee's Beispiel umzusetzen.
  13. n******t

    hm4-blog schrieb:
    CSS = Cascading Style Sheets
    kaskadierend = von OBEN nach UNTEN
    sollte eigentlich klar sein, dass das nicht geht.
    Ich glaub eher, dass sich das kaskadierend auf die Tatsache bezieht, dass Statements, die weiter oben stehen, von denen überschrieben werden, die weiter unten stehen und nicht auf Parent und Child.

    Außerdem glaube ich, dass mittlerweile jeder so weit sein sollte und JavaScript aktiviert haben.
    Versuch mal mit deaktiviertem JavaScript etwas in Facebook zu kommentieren oder so...
    JavaScript zu deaktivieren, ist denke ich nicht mehr so aktuell.

    Zu deinem Problem, ich würde dir raten, dass wenn du mit CSS fertig bist, dir JavaScript anzuschauen und dann auch jQuery (was mir sehr hilft bei meinen "Versuchen einer Website :D")

    MfG
    Dominic

    EDIT: Ja mir ist da noch was eingefallen: http://www.w3schools.com/cssref/sel_gen_sibling.asp

    Beitrag zuletzt geändert: 29.7.2012 13:07:28 von naturfit
  14. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!