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?
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).
źródło
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>
źródło
Nie jest to trudne do osiągnięcia, ale musisz użyć javascript
onmouseover
funkcji . Pseudoskrypt:Użyj własnych kolorów. Możesz również odwoływać się do funkcji javascript w poleceniu mouseover.
źródło
Myślę, że aby to osiągnąć, musiałbyś użyć JavaScript.
jQuery:
Dostosuj odpowiednio wartości i identyfikatory elementów :)
źródło
LUB
UWAGA Stan elementu nadrzędnego może wpływać tylko na stan elementu podrzędnego, więc możesz użyć:
ale nie możesz użyć
źródło