Revamp the div element to display several images upon hovering

I currently have a div containing several static images.

<div class="logos">
   <a href="#"><img src="img/logos/imgo.png"></a>
   <a href="#"><img src="img/logos/imgo1.png"></a>
   <a href="#"><img src="img/logos/imgo2.png"></a>
   <a href="#"><img src="img/logos/imgo3.png"></a>
</div>

My goal is to replace an image with another one when hovering over it. How can I achieve this for multiple images?

.logos a:hover img {
    content: url('img/logos/another-image.png');
}

If I had just one image, I could use the following CSS:

.logos a:hover img {
    content: url('img/logos/another-image.png');
}
htmlcss

Answer №1

If you're looking to achieve this effect, jQuery is the way to go.

<div class="logos">
    <a href="#"><img data-hoverimg="img/logos/hoverimgo.png" src="img/logos/imgo.png"></a>
    <a href="#"><img data-hoverimg="img/logos/hoverimgo1.png" src="img/logos/imgo1.png"></a>
    <a href="#"><img data-hoverimg="img/logos/hoverimgo2.png" src="img/logos/imgo2.png"></a>
    <a href="#"><img data-hoverimg="img/logos/hoverimgo3.png" src="img/logos/imgo3.png"></a>
</div>

Make sure to include this jQuery code within a ready function:

jQuery('.logos img').hover(function(){
    var static_src = jQuery(this).attr('src');
    jQuery(this).attr('src', jQuery(this).data('hoverimg'));
    jQuery(this).data('hoverImg', static_src);
}, function(){
    var static_src = jQuery(this).attr('src');
    jQuery(this).attr('src', jQuery(this).data('hoverimg'));
    jQuery(this).data('hoverImg', static_src);
});

Answer №2

To enhance your images, consider assigning unique ids:

<a href="#"><img id="myimg1" src="img/logos/imgo.png"></a>
<a href="#"><img id="myimg2" src="img/logos/imgo1.png"></a>
<a href="#"><img id="myimg3" src="img/logos/imgo2.png"></a>
<a href="#"><img id="myimg4" src="img/logos/imgo3.png"></a>

Furthermore, for the styling:

#myimg1:hover {
background-image: url('img/logos/another-image1.png');
}
#myimg2:hover {
background-image: url('img/logos/another-image2.png');
}

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

Emphasize the present selection along with all prior items in a menu

Attached is my menubar for a unique web design concept I am working on. My webpage is designed as a fully scrollbar page shift type, meaning it is a single page containing six sections that are scrollable by selecting menu items. Currently, when I click ...

javascripthtmlcss

Extract the query string from the URL using jQuery and perform corresponding actions based on its contents

There is a link in an email that directs the user to a webpage. On this webpage, there is a hidden pop-up that can only be displayed if a button is clicked. jQuery handles the display of this div. I have been trying to figure out how to extract the query ...

javascriptjqueryhtml

flash beneath the div tag

There seems to be an issue with the orange box and navigation showing up behind the flash on our main site. Any suggestions on how to resolve this? This problem is specifically occurring in Google Chrome. -- I've tried adding a certain parameter, bu ...

cssflash

Tips for vertically centering elements in the header using flexbox

Within the header of my website, I have structured 3 separate divs - one for a logo, one for a search input, and one for a cart link. My goal is to align these 3 .col-md-4 divs in a vertically centered position. While these divs currently have an align-it ...

htmlcssbootstrap-4flexbox

"Use AJAX to dynamically update a div element when a button is clicked with a specific value

I have a calendar that is being displayed server side using PHP. My goal now is to allow users to scroll through the months with two buttons (<< / >>) without having to reload the entire page. I have come across many similar questions and examp ...

phphtmljqueryajax

Modernized Style - Additional Scrolling Feature for List Element

I've implemented code from Google's Material Design website for my project: https://material.io/components/web/catalog/lists/ Although it works well, the issue arises when more list entries are added and I have to scroll down to view them. The p ...

htmlcssmaterial-design

Ensure that the bar width in react-chart-js-2 remains consistent regardless of the number of bars displayed

Currently, I am developing a React Chart JS component that displays a set of horizontal bars. My objective is to maintain the width of the bars at a consistent size regardless of the number of bars present (e.g., all bars at 30px). However, when additiona ...

htmlcssreactjstypescriptchart.js

What are the reasons for the decrease in canvas text quality when using requestAnimationFrame?

I have created a unique canvas effect where text changes color using requestAnimationFrame: var text = 'Sample text'; ctx.fillText(text,canvas_width/2,100); requestAnimationFrame(animate); function animate(time){ ctx.fillText(text,-offset,100 ...

htmlcanvastexthtml5-canvas

The current functionality of my web scraping code is operational; however, I am looking to enhance its specificity. Is it possible for me to designate which data to scrape by specifying the particular header above it

My current code is working perfectly, extracting all the <li> elements from a specific div. from scrapy.spider import BaseSpider from project.items import QualificationItem from scrapy.selector import HtmlXPathSelector from scrapy.http.request impor ...

pythonhtmlcssxpathscrapy

I am looking to execute a MySQL query using a value entered into a text box

$query="SELECT * FROM table1 where name='Vidya'"; My text field is ready to capture input. <input type='hidden' value='<?php echo $query;?>' id='getsearchquery' name='getsearchquery'> When I ...

phpjqueryhtmlajax

Ways to guarantee that only one accordion tab is open at a time while keeping it open continuously

Hey everyone, I'm just starting to learn how to code and still getting the hang of using Stack Overflow so please bear with me if my question isn't perfectly formatted. I have created an accordion that is almost functioning correctly, but I need ...

jqueryhtmlcssaccordion

Tips for verifying on the click of a button

Having trouble solving my issue as a newbie to HTML and jQuery. The problem at hand is: In my website, I need to implement username validation. This validation involves checking the entered username against a MySQL database. If the database contains the ...

phpjqueryhtmlmysql

Avoiding the repetition of CSS animations during Gatsby page hydration

I am facing an issue in Gatsby where I have an element with an initial CSS animation. It works perfectly when the static site loads, but after hydration, it keeps repeating. Is there a way to prevent this from happening? Below is my styled components code ...

javascriptcssgatsbystyled-components

Proper sequencing of functions within a JavaScript file

I am currently reviewing the sequence of functions in my JavaScript file to ensure that I am calling the load and resize event handlers in the correct order. Check out a snippet from my code below: function init() { // code imgLoad.on('done', f ...

javascripthtmldom-events

Exploring the possibilities of NodeJs by analyzing an HTML form

I'm facing an issue while evaluating an HTML Form using NodeJs and Express. Here's my JavaScript Code My aim is to manage HTML Forms in NodeJs using Express. const express = require('express'); const http = require('http'); ...

htmlnode.jsexpress

Solving the issue of overflowing in the animation on scroll library

I've recently started using a fantastic library called animation on scroll (aos) for my web development projects. This library offers stunning and visually appealing animations. However, I encountered an issue where it causes overflow problems in my H ...

javascripthtmlcssanimationcss-animations

The execution of the code may encounter errors initially, but it generally runs without any issues on subsequent attempts

I recently developed a piece of code to ascertain whether a value in the database is null or not. Here's the snippet: var table; var active = false; function CheckActive(table){ this.table = "table" + table + ""; var db = window.openDatabas ...

javascripthtml

Create a function that adds a new div element with a one-of-a-kind identification when

I am currently developing a web application on www.firstusadata.com/cash_flow_test/. The functionality involves two buttons that add products and vendors dynamically. However, the issue I'm facing is that the appended divs do not have unique IDs, maki ...

javascriptphpjqueryhtmlappend

There is a table equipped with two buttons. When using jQuery-ajax, rather than replacing the <tbody> of the <table>, it redirects the browser to the specified ajax URL

I initially simplified my code to troubleshoot, but I now realize I need to show the unsimplified code to pinpoint the issue. I am replacing the HTML and JavaScript with the "full version" and have updated my description with more details. I have a table ...

javascriptjqueryajaxhtml

What is the best way to prevent the contents of the First Column from spilling over into the Second Column using CSS

Currently, I am working on the CSS for two column sections: section one and section two. My goal is to have the first column of section one occupy the available space without overflowing into the second column, as illustrated in this image. https://i.ssta ...

htmlcss