JQuery с использованием $ (this) и наведения вместе
Ссылка на рабочий пример
Я пытаюсь использовать ключевое слово $ (this) и функцию jquery hover ().
Есть 3 div с классом 'item', каждый div содержит два дочерних div, 'trigger' и 'trigger-box', я пытаюсь достичь, когда пользователь наводит курсор на каждый div 'триггер', класс 'visible' должен быть добавленным в соответствующий «триггер-бокс».
HTML-код:
<div class = "container">
<div class = "item">
<div class = "tirgger">
<h5>Trigger 1</h5>
</div>
<div class = "trigger-box">
<h3>trigger box 1</h3>
</div>
</div>
<div class = "item">
<div class = "tirgger">
<h5>Trigger 2</h5>
</div>
<div class = "trigger-box">
<h3>trigger box 2</h3>
</div>
</div>
<div class = "item">
<div class = "tirgger">
<h5>Trigger 3</h5>
</div>
<div class = "trigger-box">
<h3>trigger box 3</h3>
</div>
</div>
Код JavaScript:
$('.item').hover(function() {
console.info("hover in");
$('.item .trigger-box', this).addClass('visible');
}, function() {
console.info("hover out");
$('.item .trigger-box', this).removeClass('visible');;
});
Я пробовал использовать несколько комбинаций ключевого слова $ (this), но не смог заставить его работать, любая помощь будет принята с благодарностью.
Мне просто нужно изменить стиль элемента «trigger-box» в зависимости от состояния наведения «.trigger». Мне было интересно, что это можно сделать с помощью CSS, поскольку они оба являются братьями и сестрами, а не родительскими и дочерними.
Фактически .tirgger:hover + .trigger-box { /* styles here */ } - или подход charlietfl - должен работать для подхода CSS.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы можете попробовать это:
$('.tirgger').hover(function() {
$(this).parent().find('.trigger-box').addClass('visible');
}, function() {
$(this).parent().find('.trigger-box').removeClass('visible');;
});.visible {
color:red;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "container">
<div class = "item">
<div class = "tirgger">
<h5>Trigger 1</h5>
</div>
<div class = "trigger-box">
<h3>trigger box 1</h3>
</div>
</div>
<div class = "item">
<div class = "tirgger">
<h5>Trigger 2</h5>
</div>
<div class = "trigger-box">
<h3>trigger box 2</h3>
</div>
</div>
<div class = "item">
<div class = "tirgger">
<h5>Trigger 3</h5>
</div>
<div class = "trigger-box">
<h3>trigger box 3</h3>
</div>
</div>Избавьтесь от части .item
$('.item .trigger-box', this);
Этот синтаксис - это тот же процесс, что и
$(this).find('.item .trigger-box')
Но поскольку thisявляется.item не найдет этот селектор. Сам ищет себе внутри
Для более простого решения используйте это
$(document).ready(function(){
$('.item').hover(function(){
$(this).find('.trigger-box').css("opacity","1")
},function(){
$(this).find('.trigger-box').css("opacity","0");
});
});
Вам нужно специально добавить класс, или вам просто нужно стилизовать элемент
.trigger-boxна основе наведения курсора на элемент.tirgger(что может быть достигнуто с помощью CSS)?