При наведении указателя на родительский div измените цвет bg дочерних элементов div. - PullRequest
Новая
       3

При наведении указателя на родительский div измените цвет bg дочерних элементов div.

1 голос
/ 27 февраля 2011

У меня есть следующие настройки: 

<div class="parent">
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
</div>

Я пытаюсь изменить цвет всех фонов одновременно, когда мышь наводит курсор на любой из них.Я попробовал: 

<script type="text/javascript">
 $(function() {
    $('.parent').hover( function(){
       $(this).css('background-color', 'gray');
    },
     function(){
      $(this).css('background-color', 'red');
    });
 });
 </script>

Но цвет не "просвечивает" через детей <div> s.

Есть ли способ выбрать потомков из "этого".У меня много таких наборов подряд, поэтому я думаю, что мне нужно использовать «это», чтобы у меня не было вызова каждого родителя по идентификатору.Я думаю что-то вроде этого: 

<script type="text/javascript">
 $(function() {
    $('.parent').hover( function(){
       $(this "div").css('background-color', 'gray');
    },
     function(){
      $(this "div").css('background-color', 'red');
    });
 });
 </script>

Но, не могу заставить его работать - все примеры на jquery.com используют селектор идентификатора ... ни один не использует "this".

Большое спасибо!

Ответы [ 6 ]

5 голосов
/ 27 февраля 2011

Если вы не нацелены на IE6, вам не нужно использовать JavaScript, чистый CSS поможет вам: 

.parent, .child {
    background-color:red;
}

.parent:hover, .parent:hover .child {
    background-color:gray;
}
2 голосов
/ 27 февраля 2011

попробуйте это: 

 $(function() {
    $('.parent').hover( function(){
       $(this).children("div").css('background-color', 'gray');
    },
     function(){
       $(this).children("div").css('background-color', 'red');
    });
 });

демо: http://jsfiddle.net/zt9M6/

2 голосов
/ 27 февраля 2011

вы можете использовать .find() 

$(this).find('div').css('background-color','red');

http://api.jquery.com/children/

2 голосов
/ 27 февраля 2011

вы уже пробовали .children ()?

API jQuery

0 голосов
/ 27 февраля 2011

Сделай это с CSS классами 

.parent .child{
    background-color: red;
}

.hoverstyle .child{
    background-color: gray;
}

$(.parent')hover(function() {
    $(this).addClass("hoverstyle"):
},
function(){
    $(this).removeClass("hoverstyle");
});
0 голосов
/ 27 февраля 2011

Вы используете $() со смешанными аргументами - это либо строка в качестве селектора (div), либо просто элемент DOM (this). Чтобы выбрать все div s в контексте this, попробуйте вызвать его так: 

<script type="text/javascript">
 $(function() {
    $('.parent').hover( function(){
       $("div", this).css('background-color', 'gray');
    },
     function(){
      $("div", this).css('background-color', 'red');
    });
 });
 </script>

С http://api.jquery.com/jQuery/#jQuery1

...