CSS: Ein Element schweben lassen, Effekt für mehrere Elemente?

83

Ich suche nach einer Methode für mein Schwebeproblem.

<div class="section">

<div class="image"><img src="myImage.jpg" /></div>

<div class="layer">Lorem Ipsum</div>

</div>

Jetzt haben beide Klassen, Bild und Ebene, Ränder. Beide haben unterschiedliche Farben für Normal und Hover. Gibt es eine Möglichkeit, dies zu erreichen? Wenn ich also mit der Maus über die Ebenenklasse schwebe, sind sowohl die schwebende Rahmenfarbe der Ebene als auch der Bildklasse aktiv? Und umgekehrt?

css xhtml hover Marko
quelle

Antworten:

188

Sie benötigen dafür kein JavaScript.

Einige CSS würden es tun. Hier ist ein Beispiel:

<html>
  <style type="text/css">
    .section { background:#ccc; }
    .layer { background:#ddd; }
    .section:hover img { border:2px solid #333; }
    .section:hover .layer { border:2px solid #F90; }
  </style>
</head>
<body>
  <div class="section">
    <img src="myImage.jpg" />
    <div class="layer">Lorem Ipsum</div>
  </div>
</body>
</html>
Erweitern Sie das Snippet

Corymathews
quelle
12
Okey, hier ist der Gewinner !! :) Ich wusste nicht, dass wenn ich etwas habe: Hover, ich kann das mit einem anderen Element fortsetzen! (etwas: schweben .sek.) .. Jeden Tag lernst du etwas Neues .. Danke x10
Marko
6
Was ist, wenn sich die beiden Divs (die zu schwebende und die zu zeigende) nicht innerhalb derselben unmittelbaren übergeordneten Div befinden?
Bikashg
3
Sie können die Struktur so weit nach oben verschieben, wie Sie möchten, oder Sie können ein Element hinzufügen, um das übergeordnete Element von beiden zu sein. Manchmal müssen Sie jedoch auf Javascript zurückgreifen, wenn sie nichts gemeinsam haben.
Corymathews
2
Wie würde ich ein untergeordnetes Element eines Div ändern, wenn ich ein anderes untergeordnetes Element desselben Div schwebe?
Cos
Vielen Dank! Ich habe Javascript verwendet und dieses CSS hat besser funktioniert. Manchmal ist es einfacher als wir denken.
Yanike
11

Das hat bei mir in Firefox und Chrome und IE8 funktioniert ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
    <head>
        <style type="text/css">
        div.section:hover div.image, div.section:hover div.layer {
            border: solid 1px red;
        }
        </style>
    </head>
    <body>
        <div class="section">
            <div class="image"><img src="myImage.jpg" /></div>
            <div class="layer">Lorem Ipsum</div>
        </div>
    </body>
</html>

... Sie können dies auch mit IE6 testen (ich bin mir nicht sicher, ob es dort funktionieren wird).

Steve Wortham
quelle
Eigentlich kann es in IE8 funktionieren, wie es scheint. Das Hinzufügen des Doctype machte den Unterschied. Also da - eine reine CSS-Lösung. ;)
Steve Wortham
10

Ich denke, die beste Option für Sie ist es, beide Divs von einem anderen Div einzuschließen. Dann können Sie es per CSS folgendermaßen machen:

<html>
<head>
<style>
  div.both:hover .image { border: 1px solid blue }
  div.both:hover .layer { border: 1px solid blue }
</style>
</head>

<body>
<div class="section">

<div class="both">
  <div class="image"><img src="myImage.jpg" /></div>
  <div class="layer">Lorem Ipsum</div>
</div>

</div>
</body>
</html>
Viliam
quelle
8

Dies ist nicht schwer zu erreichen, aber Sie müssen die Javascript- onmouseoverFunktion verwenden. Pseudoskript:

<div class = "section">

<div class = "image"> <img src = "myImage.jpg" onmouseover = ". layer {border: 1px solid black;} .image {border: 1px solid black;}" /> </ div>

<div class = "layer"> Lorem Ipsum </ div>

</ div>

Verwenden Sie Ihre eigenen Farben. Sie können im Mouseover-Befehl auch auf Javascript-Funktionen verweisen.

eykanal
quelle
1
+1 für die Verwendung von CSS-Änderungen der Klasse anstelle von Element 1 als weiteres Beispiel.
DVK
Das funktioniert auch, danke! Ich versuche nur, Inline-Codierung so weit wie möglich zu vermeiden ..;)
Marko
3

Sie müssten JavaScript verwenden, um dies zu erreichen, denke ich.

jQuery:

$(function(){
   $("#innerContainer").hover(
        function(){
            $("#innerContainer").css('border-color','#FFF');
            $("#outerContainer").css('border-color','#FFF');
        },
        function(){
            $("#innerContainer").css('border-color','#000');
            $("#outerContainer").css('border-color','#000');
        }
    );
});

Passen Sie die Werte und Element-IDs entsprechend an :)

brettkelly
quelle
Schön, wirklich schön! Was ist, wenn ich mehrere Abschnitte für dieselben Klassennamen habe? Jetzt habe ich das für vier mit den gleichen Klassennamen versucht und wenn ich einen schwebe, ändern sich diese alle? Soll ich vor allen Abschnitten eine laufende Nummer machen? Hat jquery Wildcard-Unterstützung? (okey, ich versuche es einfach bei Google !;)) Danke ..
Marko
0

ODER

.section:hover > div {
  background-color: #0CF;
}

HINWEIS Der übergeordnete Elementstatus kann nur den Elementstatus eines untergeordneten Elements beeinflussen, sodass Sie Folgendes verwenden können: 

.image:hover + .layer {
  background-color: #0CF;
}
.image:hover {
  background-color: #0CF;
}

aber du kannst nicht verwenden

.layer:hover + .image {
  background-color: #0CF;
}
Jnr
quelle