$ is not defined error

I've been trying to add a script that adds a class (.img_ _item--hover) to an element (.img__item) when the wrapper (.box) of said element is hovered. However, this error popped up in the browser, telling me that $ is undefined. I haven't been able to find a solution.
6 Replies
b1mind
b1mind•13mo ago
because its jQuery (you would need to load a version of it as well) Or just convert it to JS 😉
Jochem
Jochem•13mo ago
that conversion would be something like this (untested):
window.addEventListener('load'), () => {
const box = document.querySelector('.box')
box.addEventListener('mouseenter', () => {
document.querySelector('.img__item').classList.add('img__item--hover');
});
box.addEventListener('mouseleave', () => {
document.querySelector('.img__item').classList.remove('img__item--hover');
});
});
window.addEventListener('load'), () => {
const box = document.querySelector('.box')
box.addEventListener('mouseenter', () => {
document.querySelector('.img__item').classList.add('img__item--hover');
});
box.addEventListener('mouseleave', () => {
document.querySelector('.img__item').classList.remove('img__item--hover');
});
});
but honestly, that's an incredibly cursed way of styling an item on hover change the img__item--hover class to be img__item:hover and CSS will do that for you and you don't need any javascript
Jomu
Jomu•13mo ago
Ohh, I was trying to change the styling of img__item when box is hovered. That's why I assumed I'd need to use JS Also thank you so much!! I appreciate the help from both of you
b1mind
b1mind•13mo ago
nope no reason to use JS for a simple hover when we have :hover pseudo selector, agree with Jochem.
Jochem
Jochem•13mo ago
oh, hm, then the selector is slightly different (if img__item is a child of box):
.box:hover .img__item
.box:hover .img__item
Jomu
Jomu•13mo ago
there's always such a simple solution, that I realize after all the more complicated solutions 🙈 . Thank you for your help and time b1mind and Jochem!!
Want results from more Discord servers?
Add your server