CODEWITHSUNDEEP
javascripthtmlcss
Seungho Scott Shin
Seungho Scott Shin

Reputation: 29

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

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 onmouseenter or onmouseover 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 class="navbar">
        <div class="navbar_logo">
            <i class="fa-solid fa-clapperboard"></i>     
            <a href="">Sound of Silence</a>

        </div>

        <ul class="navbar_menu">
            <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="#" class="navbar_toggleButton">
            <i class="fa-solid fa-bars"></i>
        </a>
    </nav>
    <div class="teaser">
        <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 class="movieList">
        <div class="movieListItem">
            <div class="movieBtn">
                <a class="movie" href=""> abc</a>
            </div>
        </div>
        <div class="movieListItem">
            <div class="movieBtn">
                <a class="movie" href="">def</a>
            </div>
        </div>
        <div class="movieListItem">
            <div class="movieBtn">
                <a class="movie" 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');
})

Upvotes: 0

Views: 189

Answers (3)

KooiInc
KooiInc

Reputation: 122906

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 class="movieList">
  <div class="movieListItem">
    <div class="movieBtn">
      <a class="movie" href="">abc</a>
    </div>
  </div>
  <div class="movieListItem">
    <div class="movieBtn">
      <a class="movie" href="">def</a>
    </div>
  </div>
  <div class="movieListItem">
    <div class="movieBtn">
      <a class="movie" href="">ghi</a>
    </div>
  </div>
</div>

Upvotes: 0

Krzysztof Nowicki
Krzysztof Nowicki

Reputation: 100

  1. Use querySelectorAll()
  2. Use foreach()
  3. Use querySelector() for every element
  4. 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');
  });
});

Upvotes: 0

Taras
Taras

Reputation: 1145

Use mouseenter event instead of onmouseenter

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

Upvotes: 2

Related Questions