The functionality of hover effects and JavaScript animations/interactions seems to be disabled when using the <a> tag

I'm building a website for a soccer team and looking to incorporate a sliding image carousel. I've noticed that the arrow buttons (.prev or .next) are not responding when clicked or hovered over.

The arrows should have a shadow effect on hover, and when clicked, they should cycle through the images in the slideshow.

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="soccer" id="footballimg"><!--img src="footballimg.png" alt="football" id="footballimg"-->
        <div id="motto">
          <h1>Inspire greatness.</h1>
        </div>
      </div>
      <div class="mySlides fade">
        <img src="https://placehold.co/600x400" alt="soccer" id="footballimg"><!--img src="footballimg.png" alt="football" id="footballimg"-->
      </div>
      <div class="mySlides fade">
        <img src="https://placehold.co/600x400" alt="soccer" id="footballimg"><!--img src="footballimg.png" alt="football" id="footballimg"-->
      </div>
      <div class="mySlides fade">
        <img src="https://placehold.co/600x400" alt="soccer" id="footballimg"><!--img src="footballimg.png" alt="football" id="footballimg"-->
      </div>
      <a class="prev" onclick="plusSides(-1)">&#10094;</a>
      <a class="next" onclick="plusSides(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 Soccer Team</h1>
        </div>


      </div>
      <div class="text-container reveal">
        <div class="text-box">
          <h1>Inspiration</h1>
        </div>
      </div>
      <div class="text-container reveal">
        <div class="text-box">
          <h1>Commitment</h1>
        </div>
      </div>
      <div class="text-container reveal">
        <div class="text-box">
          <h1>Dedication</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>

javascripthtmlcsshoverslide

Answer №1

To resolve the issue, eliminate the negative z-index value of -100 and rectify the error in the code from plusSides to plusSlides.

Below is an example code snippet:

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>

... (omitting rest of the HTML code for brevity) ...

</body>

</html>

Answer №2

Oops! There seems to be a mistake with the code "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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modify the database entry only if the user manually changes it, or temporarily pause specific subscriptions if the value is altered programmatically

After a change in the viewmodel, I want to immediately update the value on the server. class OrderLine { itemCode: KnockoutObservable<string>; itemName: KnockoutObservable<string>; constructor(code: string, name: string) { ...

javascriptknockout.jstypescript

What is the best way to utilize the fetch API in order to retrieve multiple variables from PHP?

I am attempting to retrieve more than one variable from my remote PHP using the JavaScript fetch API, here is my PHP code: <?php include 'config.php'; //$email = $_GET['email']; try { $dbh = new PDO("mysql:host=$dbhost;dbname= ...

javascriptphpfetch-api

What is the best way to change the orientation of a vector map?

Is there a straightforward method for rotating a vector-based map on CANVAS in order to integrate it into a browser navigation system? ...

javascriptrotationhtml5-canvas

Exploring AngularJS testing using Protractor's browser.wait() method

In the process of developing an automated test suite for an AngularJS application using Protractor, I have reached a point where I no longer need to manually pause the script at each step with browser.pause(). Now, I want to let the script run through to c ...

javascriptangularjsprotractorautomated-tests

Using String Class Constraint in TypeScript

I am attempting to create a class that includes a string constraint, but I keep encountering an error at the get scale() function. class Scaling<T extends string> { _scale = ""; constructor(props: T) { this._scale = props; } ...

javascripttypescriptgenericstypescript-generics

Tips for transferring a prop from a parent component to a child in Vue.js

I have a main component named Stepper that includes a child component called ShortSummary. I am attempting to pass a property from Stepper to ShortSummary by clicking on a radiobutton, but it is not working! Here's my setup. This is the code for Stepp ...

javascripthtmlcssvue.jsvuetify.js

What is the best way to conceal overflowing text with ellipsis by utilizing dynamic Bootstrap columns?

I'm having trouble aligning a text alongside an icon within a card. The card is enclosed in the Bootstrap "col" class, which dynamically adjusts its size based on the number of items in a row. When there isn't enough space, the text wraps and ap ...

htmlcsstwitter-bootstrapbootstrap-4

Error: Discord.js was unable to access the 'id' property because it was undefined

I need help with my ticket system project where I am trying to create a channel and send an embed in that channel. However, when I run the code, I encounter the error message TypeError Cannot read property 'id' of undefined. Here is the snippet ...

javascriptnode.jsdiscorddiscord.js

Ways to show error messages from a JSON reply within a DIV element

I am currently working on an AJAX form that allows users to change their passwords. My goal is to display all validation errors within an HTML DIV element. Although the form submission functionality is working well, I am facing an issue with passing the e ...

javascriptjqueryhtmljson

Dealing with multiple jQuery ajax requests - strategies for managing them

Whenever I click the button quickly while there is jQuery Ajax loading, it seems to get stuck. How can I manage multiple requests being fired at the same time? What is the solution for the following: Cancel/abort all previous requests and only handle th ...

javascriptjqueryajax

- Only one function can operate at a time- The simultaneous operation of two

After testing with jquery.tools.js version 1.3.2.min.js and then version 1.4, I found that version 1.4 works fine as long as the dynamic menu statements are removed. Both versions work if the other is removed. Any help would be appreciated. <!-- scro ...

javascriptjqueryhtml

Align all table row elements vertically within Bootstrap

I'm struggling to vertically align different elements in my Bootstrap table row. I want the "select" dropdown, description text, and button to all appear centered vertically. How can I achieve this? https://i.sstatic.net/Xh3wm.png Below is the code ...

htmlcsstwitter-bootstrapbootstrap-4

the ng-repeat directive disables input controls within the tfoot

When working with JSON data, I encountered a situation where I needed to display different types of student details in a table. For one specific type of student, namely partners, I wanted to include input controls such as checkboxes and buttons. However, e ...

javascriptangularjstypescripthandlebars.js

Adding JSON data to an HTML attribute: A step-by-step guide

I need help with appending one of the values from my JSON object to an HTML attribute value. This is what I'm currently trying: <div ng-messages="registrationForm.[contact.id].$error"> In this example, contact.id is coming from a JSON object, ...

javascriptjqueryangularjsjson

What causes the disparity in height between a textbox and the encompassing span element?

What causes the discrepancy in element heights when looking at the code below? <span id="spanner" style="margin:0;padding:0;border:0;outline:0;"><input type="text" /></span> If you check the height of the text box, it will be shown as 1 ...

javascripthtmlcss

Switching the background image of a div by clicking on a different div

To start, you can locate all of my code right here. http://jsfiddle.net/yfukm8kh/1/ The issue I'm encountering pertains to the following section. var changePic = function (direction, id, array) { var intID = parseInt(id); var intDir = pars ...

jqueryhtmlcssbackground-image

What weakness can be found in my method for encapsulating words within spans?

A piece of code I have looks like this: // separate paragraph words by spans $layer.find('p').each(function(){ var spanned = $(this).html().split(" ").map(function(w){ return '<span class="word">' + w + '</span>&ap ...

javascriptjqueryhtml

Adding information to a MySQL database using a variable - What's the best way?

When I attempt to insert values defined in JavaScript at the beginning of the program, it seems to have an issue with me trying to input variables. Instead, it requires me to enter the raw name. The error message displayed is as follows: Error: ER_BAD_FI ...

javascriptmysqlnode.jsdatabase

Mastering intricate data structures using React.js

I am working on creating a table for orders using React+Redux. The data I need is stored in props and it has a structured format similar to this: [{ //stored in props(redux state) "id": 37, //order 1 "content": { "items": { " ...

javascriptjsonreactjs

Doing calculations in a GridView using JavaScript

Hello, I am wondering how I can implement the following JavaScript on an ASP.NET GridView since it will be rendered as a table in the browser. You can check out a demo on an HTML table here: jsfiddle Here is the JavaScript code: In this code, I calculat ...

javascriptjqueryasp.netgridview