CSS: najedź na jeden element, efekt dla wielu elementów?

84

Szukam metody na mój problem z unoszeniem się.

<div class="section">

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

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

</div>

Teraz obie klasy, obraz i warstwa, mają obramowania. Oba mają inny kolor dla normalnego i zawisu. Czy jest sposób, aby to zrobić, więc jeśli najechałem kursorem na klasę warstwy, aktywna jest zarówno klasa warstwy, jak i klasa obrazu, na której kolor obramowania jest aktywny? I na odwrót?

css xhtml hover

— Marko
źródło

191

Nie potrzebujesz do tego JavaScript.

Niektóre CSS by to zrobiły. Oto przykład:

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

Rozwiń fragment

— corymathews
źródło

12

OK, oto zwycięzca !! :) Nie wiedziałem, że jeśli coś mam: najedź, mogę kontynuować ten kolejny element! (coś: najedź. sekunda) .. Codziennie uczysz się czegoś nowego .. Dzięki x10

— Marko

6

Co się stanie, jeśli dwa elementy div (ten, nad którym chcesz umieścić kursor i ten, który ma zostać pokazany) nie znajdują się w tym samym bezpośrednim nadrzędnym elemencie div?

— bikashg

3

możesz przejść w górę struktury tak daleko, jak potrzebujesz, lub możesz dodać element, który będzie rodzicem obu. Czasami jednak, jeśli nie mają ze sobą nic wspólnego, musiałbyś skorzystać z javascript.

— corymathews

2

Jak powinienem zmienić jeden element podrzędny elementu div, umieszczając wskaźnik myszy nad innym elementem podrzędnym tego samego elementu div?

— Cos

Dzięki! Używałem javascript i ten CSS działał lepiej. Czasami jest to łatwiejsze niż nam się wydaje.

— yanike

11

To działało dla mnie w Firefoksie i Chrome i IE8 ...

<!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>

... możesz też chcieć przetestować to w IE6 (nie jestem pewien, czy to zadziała).

— Steve Wortham
źródło

Wydaje się, że w rzeczywistości może działać w IE8. Dodanie Doctype zrobiło różnicę. A więc - czyste rozwiązanie CSS. ;)

— Steve Wortham

10

Myślę, że najlepszą opcją dla Ciebie jest zamknięcie obu elementów div przez inny element div. Następnie możesz zrobić to przez CSS w następujący sposób:

<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
źródło

8

Nie jest to trudne do osiągnięcia, ale musisz użyć javascript onmouseover funkcji . Pseudoskrypt:

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

Użyj własnych kolorów. Możesz również odwoływać się do funkcji javascript w poleceniu mouseover.

— eykanal
źródło

1

+1 za użycie zmiany CSS klasy zamiast pierwszego elementu jako kolejny przykład.

— DVK

To też działa, dzięki! Po prostu staram się unikać kodowania wbudowanego tak bardzo, jak tylko mogę ..;)

— Marko,

3

Myślę, że aby to osiągnąć, musiałbyś użyć JavaScript.

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');
        }
    );
});

Dostosuj odpowiednio wartości i identyfikatory elementów :)

— brettkelly
źródło

Fajnie, naprawdę fajnie! A co, jeśli mam wiele sekcji dla tych samych nazw klas? Teraz wypróbowałem to dla czterech takich samych nazw klas i kiedy najechałem na jedną, wszystkie te zmiany? Czy numer porządkowy powinien znajdować się na początku wszystkich sekcji? Czy jQuery obsługuje jakiekolwiek symbole wieloznaczne? (okej, po prostu wyszukuję to w Google!;)) Dzięki ..

— Marko,

0

LUB

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

UWAGA Stan elementu nadrzędnego może wpływać tylko na stan elementu podrzędnego, więc możesz użyć:

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

ale nie możesz użyć

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

— Jnr
źródło