Изменение свойства непрозрачности css с помощью $ .parent ()

Question

Я хочу изменить свойство css элемента следующим образом:

Стандартная непрозрачность a.archive_blocks_fa равна 0.5. Когда a.archive_blocks_sa находится, a.archive_blocks_fa должен иметь непрозрачность 1.0. Когда событие наведения закончено, a.archive_blocks_fa должен вернуться к непрозрачности 0.5.

HTML:

<div class="archive_blocks">
 <a href="#" class="archive_blocks_fa">
   <img width="142" height="142" src="#">
 </a>
 <div class="archive_blocks_name">
   <a href="#" class="archive_blocks_sa">Text</a>
 </div>
</div>

Я написал этот код jQuery:

$('a.archive_blocks_sa').hover(function(){
    $(this).parent('.archive_blocks_fa').css('opacity','1');
}, function(){
    $(this).parent('.archive_blocks_fa').css('opacity','0.5');
});

Ребята, что я делаю не так?

Answer 1

Проблема здесь в том, что вы не обращаетесь к DOM правильно, попробуйте вместо этого:

$('a.archive_blocks_sa').hover(function(){
    $(this).closest(".archive_blocks").find('.archive_blocks_fa').css('opacity','1');
}, function(){
    $(this).closest(".archive_blocks").find('.archive_blocks_fa').css('opacity','0.5');
});

Answer 2

Что вы делаете неправильно, так это то, что элемент с классом archive_blocks_sa не имеет родителя с классом .archive_blocks_fa.

Answer 3

archive_blocks_fa является родным братом родителя archive_blocks_sa (элемент поиска).

Итак, вам нужно перейти на уровень parent, а затем использовать метод prev(), чтобы получить предыдущего брата (archive_blocks_fa) и установить его непрозрачность.Попробуйте это.

$('a.archive_blocks_sa').hover(function(){
    $(this).parent().prev('.archive_blocks_fa').css('opacity','1');
}, function(){
    $(this).parent().prev('.archive_blocks_fa').css('opacity','0.5');
});

.prev() получает непосредственно предшествующего брата каждого элемента в наборе совпадающих элементов, необязательно фильтруемых селектором.

Answer 4

Ну, я думаю, parent() выберет только archive_blocks_name div, так как это родитель, а archive_blocks_fa - нет.Попробуйте:

$(this).parent().siblings('.archive_blocks_fa').css('opacity', '1');