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

Я ищу метод для моей зависающей проблемы.CSS: Наведите один элемент, эффект для нескольких элементов?

<div class="section"> 

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

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

</div>

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

источник

2009-09-22 Marko

160

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

источник

2009-09-22 20:58:17 corymathews

+10

Okey, вот победитель !! :) Я не знал, что если у меня есть что-то: наведите указатель мыши, я могу продолжить, что еще один элемент! (somthing: hover .second) .. Каждый день вы узнаете что-то новое .. Спасибо x10 – Marko

Я тоже не знал этого. Спасибо за вашу помощь. – fadedbee

Что делать, если два div (один для зависания и один для показа) находятся не в одном и том же ближайшем родительском div? – bikashg

Для этого я должен использовать 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'); 
     } 
    ); 
});

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

источник

2009-09-22 20:26:36 inkedmn

Ницца, очень хорошо! А если у меня есть несколько разделов для одинаковых имен классов? Теперь я попробовал, что для четырех белых названий классов, и когда я нахожу один, все изменения? Должен ли я запускать число перед всеми разделами? Поддерживает ли jquery поддержку подстановочных знаков anykind? (okey, я попробую просто Google для этого!;)) Спасибо .. – Marko

Это не трудно достичь, но вы должны использовать яваскрипт onmouseover функцию. Псевдоскрипт:

 
<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.

источник

2009-09-22 20:30:32 eykanal

+1 для использования класса CSS вместо элемента один в качестве другого примера. – DVK

Это тоже работает, спасибо! Я просто стараюсь избегать встроенного кодирования, насколько могу.;) – Marko

:) Да, это то, что вы получаете, когда я печатаю быстрый «грязный код». – eykanal

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

источник

2009-09-22 20:38:25

На самом деле он может работать в IE8, кажется. Добавление Doctype имело значение. Итак, там - чистое решение CSS. ;) –

Я думаю, что лучший вариант для вас, чтобы вложить оба див других дел. После этого вы можете сделать это с помощью 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>

источник

2009-09-22 21:03:46 Viliam

ИЛИ

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

Примечание Родитель состояние элемента может воздействовать только на состояние элемента ребенка , так что вы можете использовать:

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

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

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

источник

2013-09-09 11:45:26 Jnr

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

ответ

Смежные вопросы