The onmouseenter event that I added on <div> to toggle "active" class doesn't w-CodePudding

I'm currently working on my homepage for my school project. I want to make an effect where if you hover your mouse onto the movieListItem(div) the moiveBtn(div) that consists of movie(a) shows up. My initial and last approach was to use Js to add onm ouseenter or onm ouseover events to movieListItem, so that when the event is triggered the class active is added to movieBtn which will make the display from none to flex. However, my approach did not work, since the event when triggered, it did not add active to the movieBtn. So if anyone knows why this is happening or alternative solution to what I'm aiming to do please help!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/9a357e311b.js" crossorigin="anonymous"></script>
</head>
<body>
    <nav >
        <div >
            <i ></i>     
            <a href="">Sound of Silence</a>

        </div>

        <ul >
            <li><a href="">Ticketing</a></li>
            <li><a href="">My Page</a></li>
            <li><a href="">Sign Up</a></li>
            <li><a href="">Login</a></li>
        </ul>
        <a href="#" >
            <i ></i>
        </a>
    </nav>
    <div >
        <iframe width=100% height="500" src="https://www.youtube.com/embed/i7Eaz_MdD8Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>

    <ul >
        <div >
            <div >
                <a  href=""> abc</a>
            </div>
        </div>
        <div >
            <div >
                <a  href="">def</a>
            </div>
        </div>
        <div >
            <div >
                <a  href="">ghi</a>
            </div>
        </div>

    </ul>

    
 
    <script src="main.js"></script>
</body>
</html>

.movieList{

    padding:0;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    background-color: cornflowerblue;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-decoration: black;
    padding: 10px 20px;

}

.movieListItem{
    border-radius: 6px;
    justify-content: center;
    background-color: beige;
    width: 150px;
    height: 200px;
}

.movieBtn{
    display: none;
    position:relative;
    left: 50px;
    top: 75px;
    background-color: grey;
    width: 50px;
    height: 20px;
}

.movieBtn.active{
    display: flex;
}


.movieBtn a{
    padding: 12.5px;
}

    .movieListItem:hover{
        background-color: rgb(189, 189, 168);
    }

const toggleButton = document.querySelector('.navbar_toggleButton');
const menu = document.querySelector('.navbar_menu');
const movieBtn = document.querySelector('movieBtn');
const movieListItem = document.querySelector('movieListItem');

toggleButton.addEventListener('click', () =>{
    menu.classList.toggle('active');
});

movieListItem.addEventListener('onmouseenter', () =>{
    movieBtn.classList.toggle('active');
})

CodePudding user response：

Use mouseenter event instead of onmouseenter

https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event

CodePudding user response：

Use querySelectorAll()
Use foreach()
Use querySelector() for every element
As mentioned by others you missed "." in selectors

As in:

const movieListItems = document.querySelectorAll('.movieListItem');
movieListItems.foreach(movieListItem =>{
  movieListItem.addEventListener('onmouseenter', () =>{
      movieListItem.querySelector(".movieBtn").classList.toggle('active');
  });
});

CodePudding user response：

You may not need javascript:

.movieList {
  padding: 0;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  background-color: cornflowerblue;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  text-decoration: black;
  padding: 10px 20px;
}

.movieListItem {
  border-radius: 6px;
  justify-content: center;
  background-color: beige;
  width: 150px;
  height: 200px;
}

.movieBtn {
  display: none;
  position: relative;
  left: 50px;
  top: 75px;
  background-color: grey;
  width: 50px;
  height: 20px;
}

.movieBtn.active {
  display: flex;
}

.movieBtn a {
  padding: 0 12.5px;
}

/* hovering  here*/

.movieBtn {
  display: none;
}

.movieListItem {
  cursor: pointer;
}

.movieListItem:hover .movieBtn {
  display: flex;
  background-color: rgb(189, 189, 168);
}

<div >
  <div >
    <div >
      <a  href="">abc</a>
    </div>
  </div>
  <div >
    <div >
      <a  href="">def</a>
    </div>
  </div>
  <div >
    <div >
      <a  href="">ghi</a>
    </div>
  </div>
</div>