CSS: Hover один элемент, эффект для нескольких элементов? - PullRequest
74 голосов
/ 23 сентября 2009

Я ищу способ решения проблемы с зависанием.

<div class="section">

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

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

</div>

Теперь оба класса (изображение и слой) имеют границы, оба имеют разные цвета для обычного и наведения. Есть ли способ сделать так, чтобы при наведении курсора на слой класса активировался цвет наведения границы как слоя, так и класса изображения? И наоборот?

Ответы [ 6 ]

172 голосов
/ 23 сентября 2009

Для этого вам не нужен JavaScript.

Некоторые CSS сделали бы это. Вот пример:

<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>
11 голосов
/ 23 сентября 2009

Это сработало для меня в Firefox, Chrome и 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>

... возможно, вы захотите проверить это и в IE6 (я не уверен, что он там будет работать)

10 голосов
/ 23 сентября 2009

Я думаю, что лучший вариант для вас - заключить оба div в другой div. Тогда вы можете сделать это с помощью CSS следующим образом:

<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>
8 голосов
/ 23 сентября 2009

Этого нетрудно достичь, но вам нужно использовать функцию 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>

Используйте свои собственные цвета. Вы также можете ссылаться на функции javascript в команде наведения мыши.

3 голосов
/ 23 сентября 2009

Я думаю, вам нужно использовать 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');
        }
    );
});

Настройте значения и идентификаторы элементов соответственно:)

0 голосов
/ 09 сентября 2013

OR

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

Примечание Состояние родительского элемента может влиять только на состояние дочернего элемента. так что вы можете использовать:

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

но вы не можете использовать

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