0

Помогите пожалуйста сделать так чтобы не у всех элементов .qwe изменялись стили, а только у того элемента, который стоит в блоке .commentBlock.

$(document).ready(function(){

$('.commentBlock').mouseover(function(){
    $('.qwe').css('width','13px');
    $('.qwe').css('height','13px');
    $('.qwe').css('background-image','url("tt.png")');
    $('.qwe').css('background-position','-20px -4px');

}).mouseout(function(){
    $('.qwe').css('width','13px');
    $('.qwe').css('height','13px');
    $('.qwe').css('background-image','');
    $('.qwe').css('background-position','');
});
});
1
  • И на будущее: $('.qwe').css('width','13px'); $('.qwe').css('height','13px'); Можно записывать так: $('.qwe').css({'width':'13px','height':'13px'});
    – Crasher
    21 дек 2012 в 0:10

4 ответа 4

2

Используйте поиск дочернего класса.
Через children() или find().

1

Ну во-первых чтоб не играться с потомками и их родителями советую использовать mouseenter() вместо mouseover() и mouseleave() вместо mouseout() соответственно, кстати такой же совет дается в доках jquery. А по поводу изменения конкретного экземпляра класса, то используй конструкцию вида $(this.children[x]), где X-ом будет порядковый номер экземпляра класса #commentBlock, т.е. его потомок, таким образом ты можешь перемещаться по своему DOM-дереву

 $('#commentBlock').mouseenter(function(){
            $(this.children[0]).css(что тебе надо);
            });
  });
 $('#commentBlock').mouseleave(function(){
            $(this.children[0]).css(что тебе надо);
            });
 })
2
  • Может вопрос не так поставил. Мне необходимо чтобы при наведении на блок .commentBlock изменялся css стиль .qwe, но не у всех, а только который находится в блоке commentBlock <div id='commentBlock'> <div class='qwe'>-</div> </div>
    – tayler882
    21 дек 2012 в 0:34
  • <div id='commentBlock'> в jquery выглядит как $('#commentBlock') $('#commentBlock').mouseenter(function(){ //следующая строка и есть твой .qwe, который находится только в //commentBlock $(this.parentNode.children[0]).css(что тебе надо); }); }); что касаемо описания css-стилей, то сходи сюда jquery.page2page.ru/index.php5/…
    – deniz
    21 дек 2012 в 16:32
1

Таки вот так $('#commentBlock .qwe'), или как вам написали выше $('#commentBlock').children('.qwe'). Или вы так попробовали, да не получилось?

6
  • Пишу вот так: $(document).ready(function(){ $('#commentBlock').mouseenter(function(){ $(this.children[0]).css('background-image', 'url("tt.png")'); }); $('#commentBlock').mouseleave(function(){ $(this.children[0]).css('background-image', ''); }); }); Стиль элемента меняется, но только первого элемента, как исправить? Помогите пожалуйста
    – tayler882
    21 дек 2012 в 22:43
  • $(document).ready(function(){ $('#commentBlock .qwe').mouseenter(function(){ $(this).css('background-image', 'url("tt.png")'); }); $('#commentBlock .qwe').mouseleave(function(){ $(this).css('background-image', ''); }); });​ Вам написали, как сделать, вы сделали по-своему и говорите, что не получилось:). Вот specially for you jsfiddle.net/FsrYn , только здесь просто с цветами, а не с фоновой картинкой.
    – hdimon
    22 дек 2012 в 4:07
  • В том то и все дело что мне нужно чтобы не при наводе на блок qwe окрашивался он сам, а при наводе на блок commentBlock, перейдите и посмотрите, думаю поймете что я имею ввиду jsfiddle.net/FsrYn/1
    – tayler882
    22 дек 2012 в 13:25
  • jsfiddle.net/FsrYn/2 Ну так что ли?
    – hdimon
    22 дек 2012 в 21:30
  • jsfiddle.net/FsrYn/3 могу еще предложить вот так:). А вообще, учитесь задавать вопросы максимально конкретно. Экономит время для всех.
    – hdimon
    22 дек 2012 в 21:36
1

Почему не написать просто через ф-цию $().hover()? или это deprecated? Я бы рекомендовал не лезть js-ом напрямую в стили, а работать с CSS-классами

 $(document).ready(function(){
    $('#commentBlock').mouseenter(function(){
        $(this).find('.qwe').addСlass('qwe-hover');
    });
    $('#commentBlock').mouseleave(function(){
        $(this).find('.qwe').removeClass('qwe-hover');
    });
 });

Работает в разы быстрее, особенно если нужно изменять не одно свойство

2
  • А можно, плиз, какой-нибудь прув, что работа с классом будет "в разы быстрее", чем работа со стилем для случая, когда стиль нужно изменить только один?
    – hdimon
    24 дек 2012 в 14:34
  • Не знаю что такое "прув" :D это имперические данные, полученные путем наступления не на одни грабли) Как показывает практика, одно свойство можно поменять если оно не затрагивает размеров или положения/позиционирования элементов, например цвет текста или изменение background-position, в остальных случаях рекомендуют работать с классами.
    – KerLeada
    25 дек 2012 в 8:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.