When you hover over a div, the image will automatically change

Although this issue has been brought up multiple times in the past, I have yet to find a satisfactory solution for my particular needs.

The challenge lies in wanting to change the src of an image when hovering over a div, rather than the image itself.

<div class="roles_box"> <a href=""><img class="click_role" src="http://www.nms.ac.uk/idoc.ashx?docid=71d176dc-3143-4449-8388-90512a5c53ac&version=-1"></a>

</div>

JsFiddle -- http://jsfiddle.net/squidraj/NcjGp/

Even though it should change the image when hovering over the grey area, the functionality is not working as intended.

jqueryhtmlcss

Answer №1

To start, you should specify a class selector on roles_box using . and enclose it with jQuery $(this)

jQuery(document).ready(function () {
    jQuery(".roles_box").on({
        //  ^ the dot indicates a class selector
        "mouseover": function () {
            $(this).find('img.click_role')[0].src = 'http://www.nms.ac.uk/idoc.ashx?docid=16f4a8f2-2cea-44c1-ba22-cf3c52729f6b&version=-1';
           //enclose this with jQuery 
        },
            "mouseout": function () {
            $(this).find('img.click_role')[0].src = 'http://www.nms.ac.uk/idoc.ashx?docid=71d176dc-3143-4449-8388-90512a5c53ac&version=-1';
            //Enclose this with jQuery
        }
    });
});

DEMO

Answer №2

jQuery(document).ready(function () {
    jQuery(".roles_box").on({
        "mouseover": function () {
            $(this).find('img.click_role')[0].src = 'http://www.updatedimage1.com';
        },
        "mouseout": function () {
            $(this).find('img.click_role')[0].src = 'http://www.updatedimage2.com';
        }
    });
});

Answer №3

attempting

   $(".roles_box").mouseover(function () {
            $(".click_role").attr("src", "http://www.nms.ac.uk/idoc.ashx?docid=16f4a8f2-2cea-44c1-ba22-cf3c52729f6b&version=-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

problem with angular navigation bar

Currently, I am working on a project using angular and encountering an issue with the navigation bar. I have attached two screenshots for reference. The first screenshot displays the layout before logging in, and the second one showcases the layout after ...

cssangularnavigation

Dynamic navigation menu with Bootstrap's responsive multi-level design

I recently developed a multi-level navigation menu using Bootstrap. Everything seems to be working smoothly when the screen size is 1200px or above. However, I encountered an issue with the second level dropdown menu not opening upon clicking on screens sm ...

javascriptjqueryhtmlcsstwitter-bootstrap

The height of divs spontaneously changes after resizing without any instructions

I am developing a jQuery function to vertically center an element. The function is triggered on load and here is the code: JQuery var $window_height; function Centerize(content) { content.css('margin-top', (($window_height - content.height( ...

javascriptjqueryhtmlcss

Executing an Ajax .Get request when expanding the accordion for the first time

When trying to implement an Ajax .get function that inserts data into a specific section of an accordion, I encountered a couple of issues: 1) The .get operation is triggered every time the section header is clicked to expand. Is there a way to ensure it ...

jqueryajaxjquery-uigetaccordion

When reloading jQuery datatable with AJAX, the form submission is triggered once more

Utilizing jquery datatables to retrieve data from the server, I am also able to edit this table to input new data. However, upon adding auto-refresh functionality after an addition, the create request is being submitted repeatedly. var dataTableInitilizat ...

jqueryajaxdatatables

Tips for updating the chosen value with jquery or javascript

I am facing a situation where I need to change the selected option in a dropdown menu using a function triggered onClick later in the application. <select id="myselect"> <option value=aa>aa</option> <option value=bb>bb</option&g ...

javascriptjqueryhtml

Guide to verifying the input in the textbox upon submission?

When I try to validate the textbox upon submission, it doesn't seem to be working as expected. $( "#add" ).submit(function( event ) { event.preventDefault(); if ( $( "#key" ).val() === "" ) { $( "span .valuewarning" ).text( "Please ...

jqueryvalidation

What are the advantages of incorporating JSON for retrieving data from MySQL?

So I have developed a website that retrieves data from a MySQL database using PHP, and then transforms it into JSON format for use with JavaScript. This process can be broken down into 5 steps: Query -> PDO Statement -> PHP Array -> JSON Strin ...

phphtmlmysqljsonajax

Utilizing Bootstrap 4 to ensure the final DIV is vertically stacked and fills the remaining space in the container

Having trouble creating a responsive layout using Bootstrap 4? Specifically, when two divs wrap vertically on smaller devices, the top div pushes the lower div down, exceeding the parent container. I want the lower div to fit within the container. How can ...

htmlcssbootstrap-4

The Ajax.BeginForm() function is not functioning as expected and is instead directly calling a JavaScript method within the OnSuccess

While working with ASP MVC 5, I have encountered an issue with Ajax.BeginForm() in one of my views. Whenever I submit a form using Ajax.BeginForm, the defined method is not being called. There are no errors thrown or caught, and it directly jumps to the ca ...

javascriptjqueryajaxasp.net-mvc

A combination of fixed width column and dynamic content area in Bootstrap design

Is there a way to achieve the combination of fixed and fluid width columns using Twitter Bootstrap alone, similar to this example? The HTML and CSS in the example make it seem simple. But can this be done solely with Bootstrap? ...

csstwitter-bootstrap

Looking to design an interactive grid for generating dynamic thumbnails

I am a beginner in the field of web development and I have a desire to create a website for showcasing my portfolio. This website should feature project thumbnails along with brief descriptions, all of which should be displayed dynamically. Although I poss ...

phpjavascriptjqueryhtmlcss

What is the best way to arrange two <h3> headings into a two-column layout?

I'm facing an issue with positioning two <h3> tags, one labeled “Coding Skills” and the other “Professional Skills”, into separate columns. My aim is to have "Professional Skill" in the column to the right of "Coding Skills", creating a ...

htmlcss

Changing the Speed of CSS3 Transitions Dynamically

As I am working with CSS3 Transitions, my current query pertains to initiating the animation with: -webkit-transform: translate3d(-100%, 0, 0); Is there a method to augment the predetermined speed set using: -webkit-transition: all 10s linear; This tim ...

javascriptcss

Dynamic Data Loading into Card (Using Javascript and Firestore)

Currently, I am in the process of constructing a KDS (Kitchen Display System) that utilizes javascript & firestore to display orders. The orders are presented using cards, but I'm encountering an issue where all the order items are appearing in th ...

javascripthtmlgoogle-cloud-firestore

Maximizing the power of datatables with ajax integration

Exploring pagination with AJAX on datatables.net is something I want to try. I have two input fields where users can enter start and end dates, followed by the table structure below: <table class="table table-hover" id="example"> < ...

javascriptjqueryajaxdatatable

"Safari is not displaying the element's height correctly when set to 100

I am facing an issue where I have a child div vertically centered under a parent div with a specific height. The child div is assigned the height:100% property, but it seems to be not working correctly on Safari only. To see more about this problem, you ca ...

cssmacossafariheight

Container automatically resizes to fit the width of an image, while ensuring all other buttons and elements remain neatly enclosed within

My website consists of four main sections, each with a background image of the same size. These images contain important elements that I always want to be visible. Initially, the images would resize based on the browser window size, but a recent CSS cleanu ...

css

Easily toggle between various image source paths

In my current application, all HTML files have hardcoded relative image paths that point to a specific directory. For example: <img src="projectA/style/images/Preferences.png"/> Now, I am considering switching between two different project modes: & ...

javascriptjqueryhtmlangularjs

Is it possible to create a resizable menu without distorting its appearance?

After setting up a menu on my website, I noticed that when resizing the window, it spills over into other divs on the same line. Despite trying multiple solutions, I have been unsuccessful in resolving this issue. The navigation for the menu is contained w ...

htmlcssresponsive-design