CSS: Najedź jednym elementem, efekt dla wielu elementów?

Poszukuję metody dla mojego problemu z unoszeniem.CSS: Najedź jednym elementem, efekt dla wielu elementów?

<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ą ramkę, oba mają inny kolor dla zwykłego i najechania. Czy jest sposób, aby to zrobić, jeśli umieściłem kursor na warstwie, aktywna jest zarówno obramowanie, jak i klasa obrazowania kursora? I vice versa?

Źródło

2009-09-22 Marko

160

Nie potrzebujesz do tego JavaScript.

Niektóre CSS to zrobi. 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>

Źródło

2009-09-22 20:58:17 corymathews

+10

Okey, oto zwycięzca !! :) Nie wiedziałem, że jeśli coś mam: hover, mogę kontynuować to odrobinę innego elementu! (coś: hover .second) .. Codziennie uczysz się czegoś nowego .. Dzięki X10 – Marko

Ja też tego nie wiedziałem. Dzięki za pomoc. – fadedbee

Co się stanie, jeśli dwa elementy div (ten, na którym ustawiono wskaźnik myszy i ten, który ma być wyświetlany) nie znajdują się w tym samym bezpośrednim elemencie div? – bikashg

Do tego celu trzeba użyć JavaScriptu.

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 wartości i id elementu na odpowiednio :)

Źródło

2009-09-22 20:26:36 inkedmn

Fajnie, naprawdę miło! Co zrobić, jeśli mam wiele sekcji dla tych samych nazw klas? Teraz wypróbowałem to na czterech nazwach tej samej klasy i kiedy najechałem jeden, wszystkie te zmiany? Czy powinienem wykonać numer kolejny przed wszystkimi sekcjami? Czy jquery ma obsługę symboli wieloznacznych? (okey, próbuję po prostu google!)) Dzięki .. – Marko

To nie jest trudne do osiągnięcia, ale trzeba użyć javascript onmouseover funkcję. 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 także odwoływać się do funkcji javascript w poleceniu mouseover.

Źródło

2009-09-22 20:30:32 eykanal

+1 za użycie zmiany klasy CSS zamiast elementu pierwszego jako innego przykładu. – DVK

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

:) Tak, właśnie to dostajesz, gdy wpisuję szybki 'n brudny kod. – eykanal

ten pracował dla mnie w Firefox 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że chcesz przetestować to z IE6, jak również (nie jestem pewien, czy to będzie działać tam) .

Źródło

2009-09-22 20:38:25

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

Myślę, że najlepszym rozwiązaniem dla ciebie jest, aby ująć zarówno DIV przez innego div. Następnie można 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>

Źródło

2009-09-22 21:03:46 Viliam

LUB

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

UWAGA nadrzędna stan element może tylko wpłynąć na stan elementu dziecka więc można użyć:

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

ale użytkownik nie może używać

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

Źródło

2013-09-09 11:45:26 Jnr

CSS: Najedź jednym elementem, efekt dla wielu elementów?

Odpowiedz

Powiązane problemy