Removing the mouse from the element restores the previous background image of the div

I have some text here.

<div id="imagecontainer" class="header-image-container">&nbsp;</div>

The background image is specified in the CSS for each page based on the parent class.

.category-1 #imagecontainer {
background: url(_/images/1.jpg);
}

I also have a menu. I want to change the background image on mouseover, and revert back on mouseout to the image specified in the CSS for that specific page based on the parent class. I believe this can be achieved using JQuery. For instance, if we are on a category-3 page and hover over a category-1 menu item, we will see the category-1 background image in the #imagecontainer, and then when we move our mouse out, we will see the category-3 background image again.

javascriptjquerycssmouseovermouseout

Answer №1

Here is a solution that might work for you:

When the mouse enters the '#menu' element:
    - Change the background color of '#imagecontainer' to blue.
When the mouse leaves the '#menu' element:
    - Remove any inline styles applied to '#imagecontainer'.

You can test it out by visiting this link: http://jsfiddle.net/E4rLJ/

If there are additional styles applied directly to '#imagecontainer', they will also be removed when the mouse leaves. In such cases, you may need to follow the recommendations provided by mblase75 for a more tailored solution.

Answer №2

To preserve the current background image, store it as data before replacing it and then retrieve it when needed to restore it.

$('#imagecontainer').mouseover(function() {
    $(this).data('bgimg') = $(this).css('background-image');
    $(this).css('background-image','url(my/new/url.jpg)');
}).mouseout(function() {
    $(this).css('background-image', $(this).data('bgimg'));
});

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

Is this a problem with npm or JavaScript?

Hi everyone, I'm trying to figure out if this issue is related to JavaScript or npm. If there's a problem with my JS code, could someone please help me identify it? PLEASE NOTE I used some code to get the current uid from Firebase. I'm ...

javascriptnode.jsfirebasenpm

Troubleshooting: Scope not updating in AngularJS xeditable typeahead

Currently, I am utilizing the angular xeditable typehead directive to display an autocomplete dropdown. The data is being retrieved from a JSON file on the page and utilized in the jso array for e-typeahead functionality. When typing into the input field, ...

javascriptangularjsangular-ui-bootstrapx-editable

The jQuery.ajax() function does not include object attributes that are empty

In my JavaScript code, I have defined an object named data_test. var data_test = { foo: [], bar: [ 'baz' ] }; When attempting to submit this object using jQuery.ajax(): $.ajax({ url: "test.php", type: "POST", data: data_test }); I ...

jquery

Create a full-width slider using Materialize CSS framework

When using materializecss to create a slider, I encountered an issue where the image is full width but not full height, causing scrollbars to appear. What changes can I make to ensure the slider fills out my screen without any scrollbars? Additionally, I ...

javascriptjqueryhtmlcssmaterialize

Customizing CSS color to blend seamlessly with Bootstrap's theme

Currently, I am in the process of creating a new CSS class with a background color similar to the one used in Bootstrap's "bg-primary" class. Although I have looked through the documentation and learned that using the color as a variable in other CSS ...

htmlcssbootstrap-5

A guide on how to automatically preselect a RadioGroup option in Material-UI

When a user selects an option from the MCQ Select using RadioGroup in my code and submits it, they should be able to return later and see the option they selected highlighted, similar to how Google Forms allows users to review their selections. Below is t ...

javascriptreactjsmaterial-ui

Converting a Unix timestamp to a formatted date string in Firebase: A step-by-step guide

Is there a way to change a timestamp from 1333699439 to the format 2008-07-17T09:24:17? For now, I have been utilizing Firebase.ServerValue.TIMESTAMP for timestamps in Firebase. ...

javascriptangularjsfirebasefirebasesimpleloginfirebase-hosting

Tips for resolving the issue of invalid functions as a child component in React

When I call a function that returns HTML code, everything works fine until I try to pass a parameter in. At that point, I receive an error saying "Functions are not valid as a React child." The issue is that I need to access the props from this function. T ...

javascriptreactjsreact-propsreact-componentreact-class-based-component

Is there a way to add a class (1) when scrolling to a specific div, and then switch from class (1) to class (2) when moving away from the

How can I create a JavaScript function that adds the class "animated fadeInDown" to div id hover1 when I reach or scroll to it? Also, when I scroll down or leave div id hover1, how do I change the class from "animated fadeInDown" to "animated fadeOutUp"? ...

javascriptjqueryhtmlcssanimate.css

The PHP plugin I created seems to be adding an unnecessary whitespace at the end of its output

New to the world of PHP, I challenged myself to create a simple PHP plugin that generates a text greeting based on the time of day for users. To use my plugin, simply drop the .php file into your 'includes' folder and insert a line where you want ...

javascriptphpjqueryajaxplugins

Ensure that a synchronous action is performed prior to each Backbone HTTP request

For each authenticated request (GET, POST, etc) in my Backbone/Marionette application, it is necessary to include an accessToken. The accessToken and expireDate are stored in the localStorage. To verify if the accessToken has expired, I utilize the metho ...

javascriptjqueryajaxbackbone.jsmarionette

Facing a cross-domain problem that is blocking my ajax request to fetch data from my express endpoint

Looking to retrieve and showcase data from my node/exprss file (app.js) on my index.html. Utilizing an ajax request to localhost:3000/turtles in frontend.js, but running into cross domain obstacles. APP.JS FILE var express = require('express'); ...

javascriptnode.jsexpress

ReactQuill (text editor) encounters an error: React.Children.only function was supposed to receive only one React element child but received multiple - React

After following a tutorial (https://www.youtube.com/watch?v=DjEANvaZFv0&feature=youtu.be) to replace a textarea with ReactQuill for Rich Text in my form, I encountered an error message 'Error: React.Children.only expected to receive a single React ...

javascriptreactjsreact-quill

Utilizing a switch statement in Jquery to target specific input elements for focus

My Objective As a user presses enter, I want to target specific input elements with a data-index attribute value between 0-2 and of type text. Then, I plan to check their attribute values using a switch statement to perform certain actions. Presented bel ...

javascriptjquery

When refreshing a JavaScript array of objects, it creates duplicate entries within the array

Currently, I am developing a chat application within a Vue project and experimenting with different features. A fully-featured chat app must have the ability to live-update "seen" states. This means that when one user views the last sent message, the othe ...

javascriptarraysvue.jsobject

Article from Google - Understanding the Impact of DOM Reflow on Javascript Performance

Is there evidence to support the claim that following the advice provided here (as shown below) on removing DOM elements before altering them and then re-inserting them actually results in faster performance? I'm looking for concrete figures to back ...

javascriptperformance

transforming a table into a stylized CSS design

Seeking assistance in converting a table into CSS as I am new to CSS: <table dir="ltr" width="500" border="0" align="center"> <caption><font face="Helvetica">Movies</font></caption> <colgroup width="50%" /> ...

htmlcss

What is the best way to attach an identifier to the URL of an ajax request in Vue.js?

Here is the URL for the page: To obtain JSON data, I am trying to retrieve the id from the URL and append it to my Ajax request. I extracted the id using the following code: var id = window.location.href.split('=').pop() console.log(id) My Vu ...

javascriptjqueryvue.jsvue-componentvue-router

Utilize Restangular to send data as a payload rather than a query string

Currently, my backend service is set up to register a new user in our system using the following URL: /api/users/register When using Restangular, post requests are typically sent as either query string: Restangular.all('users').post("register" ...

javascriptangularjsajaxxmlhttprequestrestangular

Incorporating a scrolling text box within an <aside> element set in a flex layout

Just trying to make sure the title is clear, as this happens to be my initial post in this space. Lately, I've been venturing back into the creation of websites and currently looking to incorporate a "concert log" below a set of GIFs on my website&apo ...

htmlcssflexboxoverflow