Преобразование дочернего элемента при наведении курсора с помощью Javascript
Я пытаюсь создать значок, который переключает класс при зависании родительского div. Пока вот мой код:
var actionIcon = document.querySelector(".task > svg")
var taskContainer = document.querySelector(".task")
function iconScale() {
actionIcon.classList.toggle('big');
}
taskContainer.onmouseenter = iconScale
taskContainer.onmouseleave = iconScale
И HTML:
<div class = "task">
<h3>Title</h3>
<svg viewBox = "0 0 24 24">
<path d = "..." />
</svg>
</div>
Моя проблема в том, что эффект, которого я пытаюсь достичь, происходит только с самым первым родительским элементом, а не с другими. Я почти уверен, что не уточняю что-то, но не знаю что. Кто-нибудь может мне намекнуть?
Ой, извини. Пропустил. Их несколько?
Ага, вот где я застрял.
Фиксированный ответ. Должен работать на вас сейчас. (пожалуйста, проголосуйте за.)
не нужно использовать JS и .big { -> достаточно .task:hover svg { background-color: blue; }
Возможный дубликат Как добавить прослушиватель addeventlistener к нескольким элементам в одной строке
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Фиксированный код для сопоставления со ВСЕМИ div, которые являются задачами. Невозможно использовать querySelector, поскольку он возвращает только первый экземпляр.
const actionIcon = (parent) => {
return parent.querySelector('svg');
};
document.addEventListener('DOMContentLoaded', function() {
// Add events to ALL divs that conform
let tasks = document.getElementsByClassName('task');
for(let t of tasks) {
t.onmouseenter = iconScale;
t.onmouseleave = iconScale;
}
function iconScale(event) {
let icon = actionIcon(event.target);
icon.classList.toggle('big');
}
});svg {
height: 50px;
width: 50px;
background-color: red;
}
.big {
background-color: blue;
}<div class = "task">
<h3>Title</h3>
<svg viewBox = "0 0 24 24">
</svg>
</div>
<div class = "task">
<h3>Title</h3>
<svg viewBox = "0 0 24 24">
</svg>
</div>
<div class = "task">
<h3>Title</h3>
<svg viewBox = "0 0 24 24">
</svg>
</div>
<div class = "task">
<h3>Title</h3>
<svg viewBox = "0 0 24 24">
</svg>
</div>Мой CSS так же прост, как в вашем примере (.big {transform: scale (1.2);}). Я попытался изменить свой код, как вы предложили, но ничего не изменилось ... Он работает только для первого элемента, а не для других. Я не упускаю что-то вроде указания div, когда он зависает ??
Прекрасно работает! Спасибо большое за вашу помощь :)
Наиболее желанный. Убедитесь, что вы включили вызов DOMContentLoaded, так как это гарантирует, что ваш контент DOM загружен и готов к привязке событий.
у вашей DIV.task один и тот же родитель?
Обратите внимание, что вы также можете использовать querySelectorAll для получения всех совпадений, а не только первого.
Также есть разница между for...in и for...of. Здесь вы должны использовать for...of, потому что for...in также возвращает некоторые дополнительные свойства, к которым вы не должны добавлять .onmouseenter/.onmouseleave.
@Herohtar спасибо за подсказку, отредактировал код, чтобы отразить вас на .. комментария. Виноват
Вы просили JavaScript, но в качестве альтернативного и более простого примера вам даже не нужно использовать JavaScript; все, что вы хотите, можно сделать полностью в CSS:
svg {
height: 50px;
width: 50px;
background-color: red;
}
.task:hover svg {
background-color: blue;
}<div class = "task">
<h3>Title</h3>
<svg viewBox = "0 0 24 24">
</svg>
</div>
<div class = "task">
<h3>Title</h3>
<svg viewBox = "0 0 24 24">
</svg>
</div>
<div class = "task">
<h3>Title</h3>
<svg viewBox = "0 0 24 24">
</svg>
</div>
<div class = "task">
<h3>Title</h3>
<svg viewBox = "0 0 24 24">
</svg>
</div>
Можете ли вы опубликовать сопроводительный HTML-код. Вы использовали консоль, чтобы проверить, есть ли у вас объект (т.е. работает ли querySelector?). Также правильно ли выполняется код после загрузки DOM?