Issue with changing image source on hover using JQuery not functioning as expected

I've been attempting to modify the image src when hovering using JQuery. I'm currently working in Brackets, and when I preview it live in Chrome, everything seems fine. However, when I try to open the file directly in Chrome or IE, it doesn't function correctly.

Here is my code:

$("#logo img").hover(
    function(){
              $("#logo img").attr("src","/images/img1.gif");
 }, function() {
              $("#logo img").attr("src","/images/img2.gif");
});

Edit: This is the HTML code:

<div id="logo">
    <img id="logo-img" src="images/img1.gif" alt="logo">
</div>

The img tag has an id "logo-img", but even targeting this id directly hasn't solved the issue:

$("#logo-img").hover(
    function(){
              $("#logo-img").attr("src","/images/img1.gif");
 }, function() {
              $("#logo-img").attr("src","/images/img2.gif");
});

Your assistance would be greatly appreciated.

jqueryhtmlcss

Answer №1

If you're encountering issues, give this a shot:

$("#myImage").hover(function(){
  $(this).attr("src", "https://static.pexels.com/photos/54630/japanese-cherry-trees-flowers-spring-japanese-flowering-cherry-54630.jpeg");
}, function(){
  $(this).attr("src", "https://static.pexels.com/photos/207962/pexels-photo-207962.jpeg");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img id="myImage" src="https://static.pexels.com/photos/207962/pexels-photo-207962.jpeg">

Give it a try and see how it goes. The issue may lie with your image ID. Utilize $(this) for a smoother process.

Answer №2

When it comes to styling images with CSS, you can use the following snippet of code:

img:hover {
  background: url("https://i2.wp.com/www.froutlet.com/store/i/user_icon.png?ssl=1");
  /* padding: [image-height] [image-width] 0 0 */
  padding: 200px 200px 0 0;
  width: 0;
  height: 0;
}
<img src="https://www.vacul.org/extension/site/design/site//images/anonymous-user.png" />

If you prefer to use JavaScript for image manipulation, you can achieve a similar effect like this:

$("#imghover").hover(function(){
  $(this).attr("src", "https://www.vacul.org/extension/site/design/site//images/anonymous-user.png");
}, function(){
  $(this).attr("src", "https://i2.wp.com/www.froutlet.com/store/i/user_icon.png?ssl=1");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img id="imghover" src="https://i2.wp.com/www.froutlet.com/store/i/user_icon.png?ssl=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

What could be causing this issue with the jQuery CSS not functioning properly?

When I come across the following HTML snippet: <div id="map"> <div class="elem"> hey1 </div> <div class="elem"> hey2 </div> <div class="elem"> hey3 </div> </div> In JavaScript: va ...

jquerycss

Guide to Wrapping Inner or Wrapping All Elements Except for the Initial Div Class

I am looking to enclose all the elements below "name portlet-title" without including other elements within the "div class name portlet-title". I have attempted the following methods: 1) $("div.item").wrapAll('<div class="portlet-body"></div ...

javascriptjquerycsshtml

Is there a way to create a rectangle shape and connect it with data from a Json file on a page

Is it possible to draw rectangles on a page.aspx? For example, by using data from a JSON object like {name:Food;name:Candy;name:Water;name:Meat;......}, where each rectangle corresponds to the count of different data names. If there are 4 names in the data ...

jqueryasp.netjsonajaxdrawrectangle

Comparison of valueChanges between ReactiveForms in the dom and component级主动形

Is there a method to determine if the change in valueChanges for a FormControl was initiated by the dom or the component itself? I have a scenario where I need to execute stuff() when the user modifies the value, but I want to avoid executing it if the v ...

javascripthtmlangulartypescriptangular-reactive-forms

Using XSLT to format HTML tables for printing

In my current project, I am developing an XSLT that retrieves a list of items from an XML file and generates an HTML table for each item. The issue I am facing is that when I attempt to print the document, the tables at the end of the page get cut off and ...

htmlcssxmlxsltxslt-1.0

What steps can I take to properly center and repair my web page that is currently a mess

This web page I'm working on is giving me a headache. The #titlediv just won't center and the navbar keeps disappearing randomly. It seems like a big issue that I can't wrap my head around. If anyone out there can help salvage it, here' ...

htmlcsscentering

Unable to see or play local mp4 file in Ionic iOS application

I am facing an issue with my Ionic app where I am trying to show a video playing in the background. The Jaeger25 HTMLVideo plugin works perfectly for Android, but when it comes to iOS, the video simply refuses to play. The video file is located in the www/ ...

javascriptioshtmlionic-frameworkhtml5-video

Interacting with an element within a jQuery dialog box created through a function click

I'm encountering an unusual issue with jQuery and Javascript across all browsers (IE, FF, Chrome). On my (asp.net) webpage, I have the following structure: A header with numerous dynamically generated buttons at PreRender A hidden div containing but ...

javascriptjqueryasp.netclickjquery-ui-dialog

jQuery Drag Drop Sorting Feature Fails to Work when Moving Items from List to Table Cell

I need assistance with creating a sortable list that can have its items dragged into a table cell, where the items can then be sorted within that cell. The process involves: Dragging a list item into the table cell. Sorting the list item in the secon ...

jqueryhtmlsortingjquery-ui

troubleshooting problem with form submissions in jquery mobile using php

As I work on developing a mobile website using jQuery Mobile and PHP, I am facing an issue with form submission. Currently, when I submit the form with PHP code, it redirects me back to the previous page, which is not what I want. My goal is to find a wa ...

phpjqueryjquery-mobile

Using numerous background images can lead to issues in Safari browser

Currently experimenting with styling the body element using two images. background: url(bg2.png) repeat-x, url(bg1.png) repeat; An issue arises in Safari where it reports an error in the console, stating that it cannot locate the image file specified at ...

htmlcsssafariwebkit

The WebRTC video feature is functioning on the local network but is encountering difficulties

Trying to grasp WebRTC has been quite the journey for me. In an attempt to troubleshoot my failed video transfer between computers, I uploaded what I have so far onto a temporary github repository: https://github.com/stevendesu/webrtc-failure My goal is ...

htmlwebrtc

Using JavaScript to create temporary drawings on a webpage that automatically erase themselves

I am curious about how to achieve a scribble effect that self-erases, similar to what is seen on this website: Example: Thank you! I have come across some similar scripts, but I am struggling to understand how to make the scribble disappear after a few ...

javascripthtmlcss

Numerous JQuery AJAX form submissions leading to individual outcomes

I have implemented a script on my page that handles form submissions for multiple forms by calling a specific action. Here is the script: $(function () { $('form').submit(function () { if ($(this).valid()) { $.ajax({ ...

javascriptjqueryhtmlajax

I am noticing that my popover is causing my page to shift when I click it. It is expanding the width of my page more than I would

Upon clicking the user id popover on my page, it expands the page width instead of adjusting within the page boundaries. This is the issue: https://i.stack.imgur.com/EqaMo.png There's a small white space present that I want to eliminate. When the po ...

javascriptcssreactjsmaterial-uipopover

The radio button becomes unchecked when moving to the next fieldset

While developing a dynamic page using PHP and Laravel, I encountered a situation where I needed to add an additional radio button option to each card. Below is the code snippet for the card in question: <div class="card" style="margin:10p ...

htmlformstwitter-bootstrapdom

Functioning Ajax Jquery form functionality

I've come across an issue while working on some jquery processes. It seems that the code I'm using doesn't work when a specific line is commented out, but works perfectly fine when uncommented. Can anyone shed some light on why this might be ...

jqueryajaxfunction

Performing a AJAX POST call to the latest Google Analytics V4 API

Recently, the Google Analytics v4 API was updated and now requires POST requests instead of GET requests. Unfortunately, there are not many examples available yet... I managed to obtain the accessToken, but when I attempt the following POST request, I alw ...

javascriptjqueryajaxpostgoogle-analytics-api

Removing a checker piece in the game of checkers after successfully jumping over it

Recently completed a game of checkers and managed to figure out the logic for moving and jumping checker pieces. However, I'm now facing an issue with implementing the logic for removing or deleting a jumped-over checker piece. How can I automaticall ...

javascripthtmlcssajax

How do I switch between liking and unliking a post using Ajax's success response?

I have successfully implemented code to insert or delete likes from the database, and it functions correctly upon page refresh. However, I am struggling to figure out how to make it toggle upon clicking. I have attempted various online solutions without su ...

phpjqueryajaxtoggle