CSS: najedź kursorem na jeden element, efekt na wiele elementów?

Szukam metody na mój problem z zawisaniem.

<div class="section">

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

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

</div>

Teraz obie klasy (image i layer) mają obramowania, obie mają inny kolor dla normal I hover. Czy jest sposób, aby tak, jeśli kursor klasy warstwy, zarówno warstwy i obrazu klasy kursor kolor obramowania jest aktywny? I vise versa?

Author: emaillenin, 2009-09-23
Source

6 answers

Nie potrzebujesz do tego JavaScript.

Jakiś CSS by 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>
 161
Author: corymathews,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-20 16:28:43

To działało dla mnie w Firefoksie, 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ż przetestować to z IE6 (nie jestem pewien, czy tam zadziała).

 10
Author: Steve Wortham,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-09-22 20:59:14

Myślę, że najlepszą opcją dla Ciebie jest dołączenie obu div przez inny div. Następnie możesz zrobić to za pomocą 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>
 9
Author: Viliam,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-09-22 21:03:46

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

<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 za pomocą polecenia mouseover.

 7
Author: eykanal,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-09-22 20:30:32

Musisz użyć JavaScript, aby to osiągnąć, myślę.

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 odpowiednio:)

 2
Author: inkedmn,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-10 00:58:16

Lub 

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

Uwaga Stan elementu nadrzędnego może mieć wpływ tylko na stan elementu podrzędnego więc możesz użyć: 

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

Ale ty nie możesz używać 

.layer:hover + .image {
  background-color: #0CF;
}
 0
Author: Jnr,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-18 10:31:36