CSS: наведите курсор на один элемент, эффект для нескольких элементов?

84

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

<div class="section">

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

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

</div>

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

css xhtml hover Марко
источник

Ответы:

191

Для этого вам не нужен 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>
Развернуть фрагмент

кориматевы
источник
12
Хорошо, вот победитель !! :) Я не знала, что если у меня что-то есть: hover, я могу продолжить этот еще один элемент! (somthing: hover .second) .. Каждый день ты узнаешь что-то новое .. Спасибо x10
Марко
6
Что, если два div (тот, над которым нужно навести курсор, и тот, который нужно показать) не находятся в одном и том же непосредственном родительском div?
bikashg
3
вы можете подняться по структуре настолько, насколько вам нужно, или вы можете добавить элемент, который будет родительским для обоих. Однако иногда, если у них нет ничего общего, вам придется прибегать к javascript.
corymathews
2
Как мне изменить один дочерний элемент div при наведении курсора на другой дочерний элемент того же div?
Cos
Благодаря! Я использовал javascript, и этот CSS работал лучше. Иногда это проще, чем мы думаем.
yanike
11

Это сработало для меня в 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 (я не уверен, что он там работает).

Стив Уортэм
источник
Вообще-то вроде может работать в IE8. Добавление Doctype имело значение. Итак, чистое решение CSS. ;)
Steve Wortham,
10

Я думаю, что лучший вариант для вас - заключить оба 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

Добиться этого несложно, но нужно использовать onmouseoverфункцию javascript . Псевдоскрипт:

<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 в команде mouseover.

Эйканал
источник
1
+1 за использование изменения класса CSS вместо первого элемента в качестве другого примера.
DVK
Это тоже работает, спасибо! Я просто стараюсь избегать встроенного кодирования, насколько могу ..;)
Марко
3

Думаю, для этого вам понадобится 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');
        }
    );
});

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

Brettkelly
источник
Красиво, очень мило! Что если у меня есть несколько разделов для одинаковых имен классов? Теперь я попробовал это для четырех с одинаковыми именами классов, и когда я нахожу одно, все эти изменения? Должен ли я делать порядковый номер перед всеми разделами? Поддерживает ли jquery подстановочный знак anykind? (окей, я попробую просто погуглить!;)) Спасибо ..
Марко
0

ИЛИ ЖЕ

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

ПРИМЕЧАНИЕ Состояние родительского элемента может влиять только на состояние дочернего элемента, поэтому вы можете использовать: 

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

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

.layer:hover + .image {
  background-color: #0CF;
}
Младший
источник