Ändern Körper bgcolor beim Schweben eines div, nur mit CSS

Ich möchte, dass, wenn ich ein Element (eine Box mit CSS) schweben, die background color des Körpers ändert sich von einer Farbe zu einem anderen, zum Beispiel weiß zu rot. Das Problem ist, dass dies nur mit CSS und ohne Javascript geschehen soll. Und wenn Javascript benötigt wird, sollte die Farbe beim Mouse Out wieder auf die vorherige wechseln.Ändern Körper bgcolor beim Schweben eines div, nur mit CSS

--------------- --------------- EDIT

Eigentlich ist das ich versuchte:

body{backgroung: #000;} 
#div{some properties} 
body #div:hover{background: #fff;}

Quelle

2012-12-26 sdnr1

Sie uns zeigen, was haben Sie bisher versucht .. selbst ist es falsch. Ich hoffe du hast etwas versucht bevor du fragst. –

Dies kann mit nur [** CSS **] (http://stackoverflow.com/q/1014861/1577396) durchgeführt werden, aber es ist nicht [** empfohlen **] (http://css-tricks.com/Eltern-Selektoren-in-CSS /). –

Reines CSS Experiment:

http://jsfiddle.net/Tymek/yrKRX/

HTML

<div id="trigger"></div> 
<div id="bg"></div>

CSS

body { 
    height: 100%; 
} 

#bg { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    widht: 100%; 
    height: 100%; 
    z-index: 1; 
    background: #EEE; 
} 

#trigger { 
    position: absolute; 
    width: 200px; 
    height: 136px; 
    top: 50%; 
    left: 50%; 
    margin: -68px 0 0 -100px; 
    background: #333; 
    z-index: 2; 
} 

/* KEY */ 
#trigger:hover ~ #bg { 
    background: #EE0; 
}

Quelle

2012-12-26 11:31:39 Tymek

Vielen Dank für Ihre Antwort. Dieses CSS-Skript funktioniert !!! Eigentlich brauchte ich eine ohne Javascript und du hast es getan. – sdnr1

Gern geschehen =] – Tymek

@Tymek Gute Lösung! – VJS

Bitte benutzen wie diese

<html> 
    <body> 

    <style type="text/css"> 

     .top{ 
      background:red; 
     } 

     .top2{ 
      background:white; 
     } 
    </style> 

    <div class="top" onmouseover="this.className='top2'" 
        onmouseout="this.className='top'">Here</div> 
    </body> 
</html>

Quelle

2012-12-26 11:19:17 Sky5005e

Die Hintergrundfarbe des Körpers sollte sich ändern und nicht das div, auf dem man schweben muss, um es zu ändern. – sdnr1

Sie können Elemente anstelle von div verwenden, in denen Sie möchten. – Sky5005e

verwenden Sie den :hover Selektor. Es scheint ziemlich einfach, es sei denn, Sie tun etwas ganz anderes.

prüft folgendes Beispiel als Referenz:

.classname { 
    background-color:white; 
} 

.classname:hover { 
    background-color:red; 
}

Quelle

2012-12-26 11:23:38 VJS

Die Hintergrundfarbe des Körpers sollte sich ändern und nicht das div, auf dem man schweben muss, um es zu ändern. – sdnr1

Nachdem Sie Ihre bearbeitete Frage gesehen haben, ist @Tymeks Antwort die beste Lösung. Bitte markieren Sie es als die richtige Antwort. – VJS

Working fiddle

Sie haben in Ihrem Code viele Tippfehler wie Mispelling background als backgroung und div als ID (#div) zu behandeln.

CSS (mit Erklärung zu Tippfehlern)

body{background: #000;}    /*backgroung (mis-spelled)*/ 
div{width:100px;      /*#div (treated as ID)*/ 
    height:100px; 
    border:1px solid black;}

Um einen übergeordneten Tag schwebt über müssen Sie zwang verwenden Javascript oder jQuery. Sie können Zweifel bekommen, warum es keine CSS-Eigenschaft gibt, um das Eltern-Tag auszuwählen, wenn ja, dann können Sie durch diese interesting link gehen. Um das elterliche Selektorkonzept in den meisten Fällen zu vermeiden, können wir die Positionierung in CSS umgehen (siehe Tymeks Lösung).

jQuery

$(document).ready(function(){ 
    $("div").hover(function(){ 
     $(this).parent(this).css('background-color','red'); 
    }); 

    $("div").mouseleave(function(){ 
     $(this).parent(this).css('background-color','white'); 
    }); 
});

Angenommen, Sie jQuery neu sind, auf einen Link in head Tag von HTML geben, unter so etwas wie die obige Funktion funktioniert.

<script src="http://code.jquery.com/jquery-latest.min.js" 
    type="text/javascript"></script>

prüfen diese Working fiddle

Quelle

2012-12-26 11:32:17

Kein Javascript, nur CSS. –

@Zachdev Ich weiß, wie man [** CSS **] (http://stackoverflow.com/q/1014861/1577396) verwendet, aber es ist nicht [** empfohlen **] (http: // css-tricks .com/parent-selectors-in-css /). Übrigens, lies nicht nur den Titel, lies auch den Beitrag. –

Ändern Körper bgcolor beim Schweben eines div, nur mit CSS

Antwort

Verwandte Themen