Hover and JS animation/interaction isn't working with <a> element - Html

MaddyYoung
April 11, 2023
297 views
0 votes
2 Answers

I’m creating a website for a football team and want a sliding image slideshow. The dots on the bottom of the slideshow, but for whatever reason I can’t interact with the arrow buttons (<a>).

Whenever I hover or try to click on the arrows (.prev or .next) nothing happens.

It is supposed to have a shadow/background on hover, and on click it is supposed to move to the next img in the slide show.

let slideIndex = 1
showSlides(slideIndex)

function plusSlides(n) {
  showSlides(slideIndex += n)
}

function currentSlide(n) {
  showSlides(slideIndex = n)
}

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName('mySlides')
  let dots = document.getElementsByClassName('dot')
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = 'none'
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(' active', '')
  }
  slides[slideIndex - 1].style.display = 'block'
  slides[slideIndex - 1].className += " active"
}

#top {
  position: relative;
  z-index: -100;
  width: 100%;
}

.mySlides {
  display: none;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  z-index: 100;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

#top a:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active .dot:hover {
  background-color: #717171;
}

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: .1
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="style.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Bevan&display=swap" rel="stylesheet">
</head>

<body>
  <div id="page">
    <!--<div id="topnav">
                <div id="modal">
                    <span class="close">&times;</span>
                    <div id="modaltext">
            <h1>Home of the Panthers.</h1>
            <h2>Pride. Tradition. Commitment.</h2>
        </div>
        </div>
        </div>-->

    <div class="toggle-btn" onclick="toggleFunction()">
      <span></span>
      <span></span>
      <span></span>
    </div>

    <nav id="header">
      <img src="pantherlogo.png" alt="Panthers Logo" id="logo">
      <div id="navbar">
        <h3><a href="index.html">HOME</a></h3>
        <h3><a href="news.html">NEWS</a></h3>
        <h3><a href="team.html">TEAMS</a></h3>
        <h3><a href="contacts.html">CONTACTS</a></h3>
      </div>
    </nav>
    <div id="top">
      <div class="mySlides fade">
        <img src="https://placehold.co/600x400" alt="football" id="footballimg"><!--img src="footballimg.png" alt="football" id="footballimg"-->
        <div id="motto">
          <h1>Restore the pride.</h1>
        </div>
      </div>
      <div class="mySlides fade">
        <img src="https://placehold.co/600x400" alt="football" id="footballimg"><!--img src="footballimg.png" alt="football" id="footballimg"-->
      </div>
      <div class="mySlides fade">
        <img src="https://placehold.co/600x400" alt="football" id="footballimg"><!--img src="footballimg.png" alt="football" id="footballimg"-->
      </div>
      <div class="mySlides fade">
        <img src="https://placehold.co/600x400" alt="football" id="footballimg"><!--img src="footballimg.png" alt="football" id="footballimg"-->
      </div>
      <a class="prev" onclick="plusSides(-1)">❮</a>
      <a class="next" onclick="plusSides(1)">❯</a>
    </div>
    <div style="text-align: center">
      <span class="dot" onclick="currentSlide(1)"></span>
      <span class="dot" onclick="currentSlide(2)"></span>
      <span class="dot" onclick="currentSlide(3)"></span>
      <span class="dot" onclick="currentSlide(4)"></span>
    </div>
  </div>
  <div id="main">
    <div class="slide-up">
      <div class="container reveal">
        <div class="text-box">
          <h1>Home of the Panthers</h1>
        </div>


      </div>
      <div class="text-container reveal">
        <div class="text-box">
          <h1>Pride.</h1>
        </div>
      </div>
      <div class="text-container reveal">
        <div class="text-box">
          <h1>Tradition.</h1>
        </div>
      </div>
      <div class="text-container reveal">
        <div class="text-box">
          <h1>Commitment.</h1>
        </div>
      </div>
    </div>

  </div>
  <div id="footer">
    <div id="map" class="footercontent">
      <h3>Sitemap</h3>
      <h4><a href="index.html">Home</a></h4>
      <h4><a href="news.html">News</a></h4>
      <h4><a href="team.html">Teams</a></h4>
      <h4><a href="contacts.html">Contacts</a></h4>
    </div>
    <div id="contactus" class="footercontent">
      <h3>Contact Us</h3>
      <h4>Email</h4>
      <h4>Twitter</h4>
      <h4>Instagram</h4>
      <h4>Facebook</h4>
    </div>
    <div id="copyright">
      <h5>Copyright</h5>
    </div>
  </div>
  </div>
  <script src="script.js"></script>
  <script src="imageslide.js"></script>

</body>

</html>

Answers

It looks like you have a typo error "plusSlides(-1)".

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="style.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Bevan&display=swap" rel="stylesheet">
</head>

<body>
  <div id="page">
    <!--<div id="topnav">
                <div id="modal">
                    <span class="close">&times;</span>
                    <div id="modaltext">
            <h1>Home of the Panthers.</h1>
            <h2>Pride. Tradition. Commitment.</h2>
        </div>
        </div>
        </div>-->

    <div class="toggle-btn" onclick="toggleFunction()">
      <span></span>
      <span></span>
      <span></span>
    </div>

    <nav id="header">
      <img src="pantherlogo.png" alt="Panthers Logo" id="logo">
      <div id="navbar">
        <h3><a href="index.html">HOME</a></h3>
        <h3><a href="news.html">NEWS</a></h3>
        <h3><a href="team.html">TEAMS</a></h3>
        <h3><a href="contacts.html">CONTACTS</a></h3>
      </div>
    </nav>
    <div id="top">
      <div class="mySlides fade">
        <img src="https://placehold.co/600x400" alt="football" id="footballimg"><!--img src="footballimg.png" alt="football" id="footballimg"-->
        <div id="motto">
          <h1>Restore the pride.</h1>
        </div>
      </div>
      <div class="mySlides fade">
        <img src="https://placehold.co/600x400" alt="football" id="footballimg"><!--img src="footballimg.png" alt="football" id="footballimg"-->
      </div>
      <div class="mySlides fade">
        <img src="https://placehold.co/600x400" alt="football" id="footballimg"><!--img src="footballimg.png" alt="football" id="footballimg"-->
      </div>
      <div class="mySlides fade">
        <img src="https://placehold.co/600x400" alt="football" id="footballimg"><!--img src="footballimg.png" alt="football" id="footballimg"-->
      </div>
      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>
    <div style="text-align: center">
      <span class="dot" onclick="currentSlide(1)"></span>
      <span class="dot" onclick="currentSlide(2)"></span>
      <span class="dot" onclick="currentSlide(3)"></span>
      <span class="dot" onclick="currentSlide(4)"></span>
    </div>
  </div>
  <div id="main">
    <div class="slide-up">
      <div class="container reveal">
        <div class="text-box">
          <h1>Home of the Panthers</h1>
        </div>


      </div>
      <div class="text-container reveal">
        <div class="text-box">
          <h1>Pride.</h1>
        </div>
      </div>
      <div class="text-container reveal">
        <div class="text-box">
          <h1>Tradition.</h1>
        </div>
      </div>
      <div class="text-container reveal">
        <div class="text-box">
          <h1>Commitment.</h1>
        </div>
      </div>
    </div>

  </div>
  <div id="footer">
    <div id="map" class="footercontent">
      <h3>Sitemap</h3>
      <h4><a href="index.html">Home</a></h4>
      <h4><a href="news.html">News</a></h4>
      <h4><a href="team.html">Teams</a></h4>
      <h4><a href="contacts.html">Contacts</a></h4>
    </div>
    <div id="contactus" class="footercontent">
      <h3>Contact Us</h3>
      <h4>Email</h4>
      <h4>Twitter</h4>
      <h4>Instagram</h4>
      <h4>Facebook</h4>
    </div>
    <div id="copyright">
      <h5>Copyright</h5>
    </div>
  </div>
  </div>
  <script src="script.js"></script>
  <script src="imageslide.js"></script>

</body>

</html>

To fix the issue, remove the negative z-index of -100 and correct the typo plusSides to plusSlides.

Here is a sample code:

let slideIndex = 1
showSlides(slideIndex)

function plusSlides(n) {
  showSlides(slideIndex += n)
}

function currentSlide(n) {
  showSlides(slideIndex = n)
}

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName('mySlides')
  let dots = document.getElementsByClassName('dot')
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = 'none'
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(' active', '')
  }
  slides[slideIndex - 1].style.display = 'block'
  slides[slideIndex - 1].className += " active"
}

#top {
  position: relative;
  width: 100%;
}

.mySlides {
  display: none;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  z-index: 100;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

#top a:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active .dot:hover {
  background-color: #717171;
}

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: .1
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="style.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Bevan&display=swap" rel="stylesheet">
</head>

<body>
  <div id="page">
    <!--<div id="topnav">
                <div id="modal">
                    <span class="close">&times;</span>
                    <div id="modaltext">
            <h1>Home of the Panthers.</h1>
            <h2>Pride. Tradition. Commitment.</h2>
        </div>
        </div>
        </div>-->

    <div class="toggle-btn" onclick="toggleFunction()">
      <span></span>
      <span></span>
      <span></span>
    </div>

    <nav id="header">
      <img src="pantherlogo.png" alt="Panthers Logo" id="logo">
      <div id="navbar">
        <h3><a href="index.html">HOME</a></h3>
        <h3><a href="news.html">NEWS</a></h3>
        <h3><a href="team.html">TEAMS</a></h3>
        <h3><a href="contacts.html">CONTACTS</a></h3>
      </div>
    </nav>
    <div id="top">
      <div class="mySlides fade">
        <img src="https://placehold.co/600x400" alt="football" id="footballimg"><!--img src="footballimg.png" alt="football" id="footballimg"-->
        <div id="motto">
          <h1>Restore the pride.</h1>
        </div>
      </div>
      <div class="mySlides fade">
        <img src="https://placehold.co/600x400" alt="football" id="footballimg"><!--img src="footballimg.png" alt="football" id="footballimg"-->
      </div>
      <div class="mySlides fade">
        <img src="https://placehold.co/600x400" alt="football" id="footballimg"><!--img src="footballimg.png" alt="football" id="footballimg"-->
      </div>
      <div class="mySlides fade">
        <img src="https://placehold.co/600x400" alt="football" id="footballimg"><!--img src="footballimg.png" alt="football" id="footballimg"-->
      </div>
      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>
    <div style="text-align: center">
      <span class="dot" onclick="currentSlide(1)"></span>
      <span class="dot" onclick="currentSlide(2)"></span>
      <span class="dot" onclick="currentSlide(3)"></span>
      <span class="dot" onclick="currentSlide(4)"></span>
    </div>
  </div>
  <div id="main">
    <div class="slide-up">
      <div class="container reveal">
        <div class="text-box">
          <h1>Home of the Panthers</h1>
        </div>


      </div>
      <div class="text-container reveal">
        <div class="text-box">
          <h1>Pride.</h1>
        </div>
      </div>
      <div class="text-container reveal">
        <div class="text-box">
          <h1>Tradition.</h1>
        </div>
      </div>
      <div class="text-container reveal">
        <div class="text-box">
          <h1>Commitment.</h1>
        </div>
      </div>
    </div>

  </div>
  <div id="footer">
    <div id="map" class="footercontent">
      <h3>Sitemap</h3>
      <h4><a href="index.html">Home</a></h4>
      <h4><a href="news.html">News</a></h4>
      <h4><a href="team.html">Teams</a></h4>
      <h4><a href="contacts.html">Contacts</a></h4>
    </div>
    <div id="contactus" class="footercontent">
      <h3>Contact Us</h3>
      <h4>Email</h4>
      <h4>Twitter</h4>
      <h4>Instagram</h4>
      <h4>Facebook</h4>
    </div>
    <div id="copyright">
      <h5>Copyright</h5>
    </div>
  </div>
  </div>
  <script src="script.js"></script>
  <script src="imageslide.js"></script>

</body>

</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Hover and JS animation/interaction isn't working with <a> element – Html

Answers