When hovering over different <a> tabs, showcase various images in individual <div> sections

Here are the buttons I am working with -

<div class="nav nav-tabs " id="nav-tab" role="tablist">
                    <a style="text-decoration:none" class="nav-item nav-link" data-toggle="tab" href="#" id="ps" role="tab" aria-selected="true">tab1</a>                                                                                               
                    <a style="text-decoration:none" class="nav-item nav-link" data-toggle="tab" href="#" id="pi" role="tab" aria-selected="false">tab2</a> 
                    <a style="text-decoration:none" class="nav-item nav-link" data-toggle="tab" href="#" id="ri" role="tab" aria-selected="false">tab3</a>                                                                                                                                                  
                    </div>

I also have 3 images that need to appear on hover for each tab, as mentioned above -

<div class="hide1"> <img src="img/image1.jpg" style="max-width:100%; max-height:100%; border: 1px solid #424242;"></div>
               <div class="hide2"> <img src="img/image2.jpg" style="max-width:100%; max-height:100%; border: 1px solid #424242;"></div>
               <div class="hide3"> <img src="img/image3.jpg" style="max-width:100%; max-height:100%; border: 1px solid #424242;"></div>

Here is the CSS code I am using for this functionality -

div.hide1 { 
    display: none; 
    }           
    a#ps:hover + div.hide1 
    { 
    display: block; 
    } 
    div.hide2 { 
    display: none; 
    }           
    a#pi:hover + div.hide2
    { 
    display: block; 
    } 
    div.hide3 { 
    display: none; 
    }           
    a#ri:hover + div.hide3 
    { 
    display: block; 
    } 

Answer №1

For those who prefer not to rely on javascript for changing images, a clever solution is to utilize a single or multiple divs to display the images.

Instead of hiding these three divs using CSS, set their position to absolute and adjust their z-index values from 0 to 9 as needed. Then, on hover, utilize @keyframes to modify the z-index or consider using @media queries.

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

CSS Only flyout navigation - reveal/hide with a tap or click

I want to make adjustments to a CSS-only menu that has a horizontal flyout effect triggered by hovering. I am looking to achieve the same effect on touch or tap - meaning, one tap to open the menu and another tap to close it. Is it possible to accomplish ...

Nesting CSS classes allows for more specific targeting of

I am a bit rusty on CSS, it's been about 5-7 years since I last worked with it. Could someone help me come up with a solution to my problem? Here's the ideal design I have in mind: table.ctable { class:collapsible collapsed; } I know this syn ...

Looking for a jQuery autocomplete plugin that resembles the one used in Facebook's email form. Does anyone have any recommendations?

When filling out the form, you have the ability to enter a friend's name. The form will then suggest names from your friends list, complete with profile thumbnails. From there, you can select the desired profile which will automatically populate in th ...

Is there a method to obtain the image path in a similar manner to item.src?

I am currently utilizing freewall.js, which can be found at The images will be generated dynamically. Therefore, the HTML structure will look like this: <div class="brick"> <img src="" width="100%"> </div> Here is the corresponding J ...

Deactivate event handling for viewport widths below a specified threshold

Currently, I am attempting to deactivate a script when the width of the window falls below 700px. Despite reviewing suggestions from various sources, I have not been successful so far. window.onresize = function () { if(window.innerWidth < 700) { ...

Implementing conditional validation based on radio button selection with the jQuery validation plugin

This topic goes beyond my basic understanding of jQuery. Here is the form I am working on: http://jsfiddle.net/calebo/E5CRU/ First Question: There are 3 radio buttons, and if the user selects 'other', then the input field for 'other' ...

Tab panels are shown by Bootstrap 5 tabs

I am using Bootstrap 5 to design a layout that changes based on the width of the screen. When the screen width is greater than or equal to 992 pixels, a table is displayed in the sidebar and some text is shown in the main content area. However, if the scre ...

Determine the maximum size of a specified number of square divs that can fit within responsive parent divs

I am working on creating a grid of square divs inside a container with variable height and width. The number of square div's is predetermined. All square divs will have images with the same dimensions (similar to the example). They should align left ...

Setting the display property to none continues to impact the positioning of elements

Currently, I am in the process of making my portfolio website responsive by using media queries. For mobile screens, I have successfully implemented a nav select drop down menu. However, when it comes to iPad screens, I want to display a regular menu. To a ...

Setting the height of a parent element in AngularJS when using ng-repeat

I'm dealing with a ng-repeat that has varying heights. When I set a fixed height, everything looks fine. However, I need the parent panel's height to adjust automatically based on the ng-repeat child elements to avoid overflow issues. Is there a ...

Retrieving an Ajax response by using form.submit() and sending it to PHP

After spending hours trying to mix a form.submit() call with a jquery/ajax call in order to receive a response from my php login script, I am at a loss. Despite looking through countless posts and examples on the same topic, I can't seem to find a sol ...

Occasionally, data may fail to be fetched when using a Jquery GET

Here's what I've narrowed it down to: $.getJSON('/drinks/getColors', function(items) { colors = items; }); $.each(colors, function(index2, value2) { if (value.name == value2.name) { curColor = value2.color; } }); ...

Using PHP's explode function to convert JSON output into an array

Hello, I received a JSON output from an API which contains information about pet adoption. The data includes details like the adoption process and personality of the animals. {"listings":[{"adoption_fee":"$200","adoption_process":"For cats, please fill ou ...

Display a loading message using jQuery Dialog when the page is loading

I have a button that triggers a jQuery Dialog box to open. $( "#dialog" ).dialog({ autoOpen: false, title: 'Contract', height: 450, width:1100, modal:true, resizable: true }); $( ".btnSend" ).click(function() { var id=$(this).a ...

The button component in my React application is not functioning as expected, despite utilizing the useState and useEffect hooks

I'm having trouble with my Button not working, even though I am using useState and useEffect Check out the code below: import React, { useState, useEffect } from "react"; // import Timeout from "await-timeout"; import ...

Problem with keydown event in jQuery on Android mobile browser

I am attempting to have a textarea respond to keydown events. I experimented with the following code: <textarea id="text"></textarea> $('#text').keydown(function() { alert('keydown'); }); While this works well on deskto ...

Trouble accessing HTML file in web browser

I just finished creating a basic webpage called HelloWorld.html using HTML, JavaScript, and CSS. It runs smoothly when I open it from Eclipse IDE and view it through a browser. The functionality of the page is that it contains 5 buttons, each revealing th ...

What could be causing the uneven application of CSS padding when it is applied to a div that serves as the parent of an HTML form?

Padding has been added only to the top and bottom of a div. The padding attribute is displaying consistently for the form element, however, it is not behaving uniformly for the parent div of the form as illustrated in the image provided below. Output:- h ...

The placement of the breadcrumb trail is not in the right position

My website includes a menu and breadcrumbs. The menu consists of two submenus: Design Services, Design Portfolio, Design Fees, About Us, Contact Us, Design Resources, Design Vacancies, and Terms. Clicking on Design Services reveals Graphic Design, Logo Des ...

Ways to ensure even spacing in a responsive header design

On my homepage, I have a large header image that is responsive in the mobile version. However, I am having trouble managing the spacing between the button and text below it. The spacing varies on different mobile screens and sometimes appears larger than i ...