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

83

Я шукаю метод для моєї проблеми з зависанням.

<div class="section">

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

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

</div>

Тепер обидва класи, зображення та шар, мають межі. Обидва мають різний колір для звичайного та наведення. Чи є спосіб зробити це, тож якщо я наводжу клас шару, як шар шару, так і клас зображення, який наводить колір межі, активний? А навпаки?

css xhtml hover

— Марко
джерело

188

Для цього вам не потрібен 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 працював краще. Іноді це простіше, ніж ми думаємо.

— Яніке

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. Додавання типу документа змінило ситуацію. Тож там - чисте рішення CSS. ;)

— Стів Уортем

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

Цього не складно досягти, але вам потрібно використовувати функцію javascript onmouseover. Псевдоскрипт:

<div class = "section">

<div class = "image"> <img src = "myImage.jpg" onmouseover = ". шар {border: 1px solid black;} .image {border: 1px solid black;}" /> </div>

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

</div>

Використовуйте власні кольори. Ви також можете посилатися на функції javascript у команді наведення курсора.

— ейканал
джерело

1

+1 за використання зміни класу CSS замість елемента one як іншого прикладу.

— 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');
        }
    );
});

Налаштуйте значення та ідентифікатори елементів відповідно :)

— бреткеллі
джерело

Приємно, справді приємно! Що робити, якщо у мене є кілька розділів для однакових назв класів? Тепер я спробував це для чотирьох з однаковими іменами класів, і коли я наводжу одне, все це змінюється ?? Чи слід робити біговий номер перед усіма секціями? Чи підтримує jquery узагальнюючий знак будь-який вид? (гаразд, я намагаюся просто погуглити!)) Дякую ..

— Марко

0

АБО

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

ПРИМІТКА Стан батьківського елемента може впливати лише на стан елемента дитини, тому ви можете використовувати:

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

але використовувати не можна

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

— Jnr
джерело