Clicking on the overlaying divs in the slideshow does not trigger any changes when clicked

My question is about the behavior of the href attribute in a fade-style animation. Even when different containers are visible, the href value remains constant.

Below is the HTML code:

<div id="teaserslider">
    <ul>
        <li>
            <section id="container_1">
                <div class="head gradient-top loading" onclick="document.location.href='container1_detail.html'">
                    <div>
                        <!-- Content -->
                    </div>
                </div>
            </section>
        </li>
        <li class="animation">
            <section id="container_2">
                <div class="head gradient-top loading" onclick="document.location.href='container2_detail.html'">
                    <div>
                        <!-- Content -->
                    </div>
                </div>
            </section>
        </li>
    </ul>
</div>

And here is the CSS:

#teaserslider{
   height: 100px;
   margin-bottom: 6px;
}

#teaserslider li {
   position: absolute;
   list-style: none;
   -webkit-transition: opacity 1s ease-in-out; 
}

@-webkit-keyframes fadeout{
0% {
    opacity: 1;
}
45% {
    opacity: 1;
}
55% {
    opacity: 0;
}
100% {
    opacity: 0;
}
}

#teaserslider li.animation {
   -webkit-animation-name: fadeout;
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-duration: 5s;
   -webkit-animation-direction: alternate;
   -webkit-transform: translateZ(0);
}

I only use the webkit engine because this code runs inside a Phonegap Application for iOS. However, regardless of which container is displayed, clicking always leads to "container2_detail.html." Does anyone know how to solve this issue? Thank you.

Answer №1

Perhaps you need to specify the z-index for it. Try writing it like this:

@-webkit-keyframes fadeout{

0% {
    opacity:1;
    z-index:1;
}
45% {
    opacity:1;
    z-index:1;
}
55% {
    opacity:0;
    z-index:-1;
}
100% {
    opacity:0;
    z-index:-1;
}
}

Answer №2

I attempted this technique and it appears to be effective

@-webkit-keyframes fadeout{

0% {
    visibility: visible;
    opacity: 1;
    z-index: 1;
}
45% {
    visibility: visible;
    opacity: 1;
    z-index: 1;
}
55% {
    visibility: hidden;
    opacity: 0;
    z-index: -1;
}
100% {
    visibility: hidden;
    opacity: 0;
    z-index: -1;
}

}

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

Using Rails to load an image from CSS

My current approach to loading an image is using this code: <div id="bglion"><%= image_tag("BG-LION6.png")%></div>, which successfully displays the image. However, I am interested in loading the image from a CSS file instead. After resea ...

Tips for organizing a grid to achieve the desired layout

Overview I am working on organizing items within the MUI Grid. The grid consists of multiple dynamic rows and columns. Each row has a fixed first column, followed by a variable number of scrollable columns. The scrollable columns should be grouped togethe ...

What causes a div to shift to the right when the margin-left is set to auto?

I am curious to understand why setting the margin-left of the div with id="pink" to auto causes the div to move to the right side. Take a look at the image below: HTML <div id="aqua">aqua</div> <div id="yellow">yellow</div> & ...

How can we use Jquery to add animation effects to our styling

I am a beginner with JQuery and struggling to make the code below work correctly. $('.announcement_panel_button').click(function(e){ $('#site_logo').animate({ 'margin-top': '5px' }, 5000); e.pre ...

Manipulate an image by hiding it, altering its contents, and then displaying it

I am seeking the most effective method to accomplish the following task: $("#some-image").fadeOut(); $("#some-image").attr("src", "new-src.png"); $("#some-image").fadeIn(); For timing purposes, the code below is a step closer, but it still needs improvem ...

The overflow:hidden feature is ineffective in Firefox, yet functions properly in both IE and Chrome browsers

I'm in the process of creating a webshop and facing an issue with my sidebar due to varying product counts on different pages. For now, I have implemented the following workaround: padding-bottom: 5000px; margin-bottom: -5000px; overflow: ...

"Enhance your website with a dynamic Jssor slider featuring nested slides and vertical

Exploring the idea of merging the nested slider feature with a vertical thumbnail display. Reviewing the source code for examples image-gallery-with-vertical-thumbnail.source.html and nested-slider.source.html, I am wondering how to effectively combine t ...

Safari is truncating the box-shadow of an element enclosed within a button

I'm struggling with a button that has an element inside receiving a box-shadow: button { padding: 0; border: 0; margin: 0; overflow: visible; -webkit-appearance: none; background: white; } .shadow { display: inline-block; vertical- ...

Tips for organizing checkboxes in rows horizontally

My question is related to this issue I am trying to arrange my checkboxes in 4 columns horizontally <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> ...

Angular Tag < with CSS styling

Why should we use the angular tag in CSS? For example: .class << span Typically, we use these types of tags: body { background-color:#d0e4fe; } h1 { color:orange; text-align:center; } p { font-family:"Times New Roman"; font-si ...

The "else" statement is never being executed

Trying to create a form where users enter their first name, last name, and city. If any input is empty or contains numbers, a message should appear requesting to fill out all boxes without numbers. Otherwise, display a personalized quote using the input in ...

Looking to dynamically set a background image using data fetched from an API in a ReactJS project

Looking to incorporate a background image from an API response in ReactJS Here is some sample code: useEffect(() => { axios.get(`https://apiaddress=${API_KEY}`) .then(res=>{ console.log(res); setRetrieved(res.data); console.log(retrieved ...

Creating an animated CSS growth effect using inline SVG

I'm trying to make these circuits look like they are running downwards. I have the right movement, but I can't seem to start them at their actual size, causing them to appear skewed at the beginning of the animation and then scaling to full size ...

Tips for Removing Padding in Material UI Container Component

I'm currently working on creating a hero banner using the material-ui framework and I've encountered an issue. Here's what I have so far: https://i.stack.imgur.com/UXTDY.png However, I'm facing an irritating problem with left and rig ...

What is the best technology to implement for a band website design?

I'm in the process of creating a website for my friend's band, and I need some creative input. The site will feature minimal content such as a bio, news, and embedded audio/visual material. While my web development skills are decent, I'm loo ...

Differences between addEventListener and jQuery's on method, as well as form.submit and jQuery's

I encountered a situation where callbacks registered using jQuery's on method were not being called when trying to trigger form submission with the HTML Form element object instead of jQuery. After some testing, I discovered that changing the code to ...

Denied rendering of design due to incompatible MIME type

Just delved into the world of node / express and decided to test my skills by creating a simple tip calculator app. However, I seem to have hit a roadblock with loading my CSS. The console keeps throwing this error: "Refused to apply style from &apos ...

Display or conceal a div element depending on the user's choice

I am looking to hide inactive divs, but whenever I reload the page, all tab contents merge into one. The screenshot below shows the issue I'm facing. Screenshot Below is the code snippet: $('.tab a').on('click', function ...

Is there a reason why the Chrome browser doesn't trigger a popstate event when using the back

JavaScript: $(document).ready(function() { window.history.replaceState({some JSON}, "tittle", aHref); $(window).bind("popstate", function(){ alert("hello~"); }); }); Upon the initial loading of the www.example.com page, the above JavaScript code is ex ...

Showing how an iframe can adjust its height to 100% within a div element

Currently, I have a player status script implemented on our Minecraft Server. This script displays the server name, IP address, and the heads of the players currently online. The setup includes two div boxes for the status box: one outer box to fix its pos ...