toggleClass() does not work for me

Question

I'm trying to set up a video gallery and when I'm hovering over a video thumbnail I want my play button to change from opacity: .3 to opacity: 1. I'm trying to achieve this by using a jQuery script with toggleClass(). I've tried using animate() with opacity, which works. But I want to go with the toggleClass() method instead. But when I hover nothing happens.

//Fade in Play Button
$('.gallery-poster-play-button').hover(function() {
  $('.gallery-poster-play-button img').toggleClass('toggle-opacity-play-button');
});

.video-list {
  display: flex;
  justify-content: flex-start;
  list-style: none;
}

.video-list li {
  margin-right: 10px;
  transition: all .3s;
}

.video-list li:hover {
  transform: scale(0.98);
  cursor: pointer;
}

.video-list li img {
  border-radius: 4px;
}

.video-list li a {
  display: block;
  padding: 5px;
  text-decoration: none;
}

.play-button {
  position: relative;
}

.gallery-poster-play-button {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.gallery-poster-play-button img {
  position: absolute;
  left: 40%;
  top: 35%;
  vertical-align: middle;
  opacity: .3;
}

.toggle-opacity-play-button {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="video-gallery" class="video-list">
  <li class="play-button" data-poster="../assets/videos/posters/video-poster-1.png" data-sub-html="video caption1" data-html="#video1">
    <img src="../assets/videos/posters/video-poster-11.png" />
    <div class="gallery-poster-play-button">
      <img src="../assets/data/node_modules/lightgallery/dist/img/video-play.png" alt="">
    </div>
  </li>
  <li class="play-button" data-poster="../assets/videos/posters/video-poster-2.png" data-sub-html="video caption2" data-html="#video2">
    <img src="../assets/videos/posters/video-poster-22.png" />
    <div class="gallery-poster-play-button">
      <img src="../assets/data/node_modules/lightgallery/dist/img/video-play.png" alt="">
    </div>
  </li>
</ul>

Why don't you use the `:hover` pseudoclass? You don't need JavaScript to change styles on hover. — Imanuel, May 02 '17 at 10:56
That's a really good question... Why didn't I? x) Sometimes the brain just wants to make it complicated ;) Ty. — Dennis Lundberg, May 02 '17 at 11:06

score 3 · Accepted Answer · answered May 02 '17 at 11:00

The issue is because the .toggle-opacity-play-button rule is not specific enough to override the opacity setting from .gallery-poster-play-button img. You need to increase the specificity. You will also need to use $(this).find('img') to only affect the child of the current element, like this:

.gallery-poster-play-button img.toggle-opacity-play-button {
  opacity: 1;
}

//Fade in Play Button
$('.gallery-poster-play-button').hover(function() {
  $(this).find('img').toggleClass('toggle-opacity-play-button');
});

.video-list {
  display: flex;
  justify-content: flex-start;
  list-style: none;
}

.video-list li {
  margin-right: 10px;
  transition: all .3s;
}

.video-list li:hover {
  transform: scale(0.98);
  cursor: pointer;
}

.video-list li img {
  border-radius: 4px;
}

.video-list li a {
  display: block;
  padding: 5px;
  text-decoration: none;
}

.play-button {
  position: relative;
}

.gallery-poster-play-button {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.gallery-poster-play-button img {
  position: absolute;
  left: 40%;
  top: 35%;
  vertical-align: middle;
  opacity: .3;
}

.gallery-poster-play-button img.toggle-opacity-play-button {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="video-gallery" class="video-list">
  <li class="play-button" data-poster="../assets/videos/posters/video-poster-1.png" data-sub-html="video caption1" data-html="#video1">
    <img src="../assets/videos/posters/video-poster-11.png" />
    <div class="gallery-poster-play-button">
      <img src="../assets/data/node_modules/lightgallery/dist/img/video-play.png" alt="">
    </div>
  </li>
  <li class="play-button" data-poster="../assets/videos/posters/video-poster-2.png" data-sub-html="video caption2" data-html="#video2">
    <img src="../assets/videos/posters/video-poster-22.png" />
    <div class="gallery-poster-play-button">
      <img src="../assets/data/node_modules/lightgallery/dist/img/video-play.png" alt="">
    </div>
  </li>
</ul>

That being said, you don't need to use JS at all, as the CSS :hover pseudo selector will work fine here:

.video-list {
  display: flex;
  justify-content: flex-start;
  list-style: none;
}

.video-list li {
  margin-right: 10px;
  transition: all .3s;
}

.video-list li:hover {
  transform: scale(0.98);
  cursor: pointer;
}

.video-list li img {
  border-radius: 4px;
}

.video-list li a {
  display: block;
  padding: 5px;
  text-decoration: none;
}

.play-button {
  position: relative;
}

.gallery-poster-play-button {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.gallery-poster-play-button img {
  position: absolute;
  left: 40%;
  top: 35%;
  vertical-align: middle;
  opacity: .3;
}

.gallery-poster-play-button:hover img {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="video-gallery" class="video-list">
  <li class="play-button" data-poster="../assets/videos/posters/video-poster-1.png" data-sub-html="video caption1" data-html="#video1">
    <img src="../assets/videos/posters/video-poster-11.png" />
    <div class="gallery-poster-play-button">
      <img src="../assets/data/node_modules/lightgallery/dist/img/video-play.png" alt="">
    </div>
  </li>
  <li class="play-button" data-poster="../assets/videos/posters/video-poster-2.png" data-sub-html="video caption2" data-html="#video2">
    <img src="../assets/videos/posters/video-poster-22.png" />
    <div class="gallery-poster-play-button">
      <img src="../assets/data/node_modules/lightgallery/dist/img/video-play.png" alt="">
    </div>
  </li>
</ul>

Makes perfect sense. Thanks for the spot on answer. – Dennis Lundberg May 02 '17 at 11:06 — Dennis Lundberg, May 02 '17 at 11:06

toggleClass() does not work for me

1 Answers1