Clicking on an element deactivates its hover state

While experimenting on this JSFiddle, I noticed that after clicking one of the boxes, the hover state becomes inactive and doesn't show up again.

These three boxes have their background set using css background-image. The click event is attached using jQuery. Can you assist me in identifying why the hover state stops working?

Thank you for your help.

Answer №1

When jQuery updates the background image, it does so dynamically by modifying the actual HTML content. This results in the new background image being more targeted or specific compared to the one set in the #one:hover, making it difficult for it to override.

To ensure that the new background image on :hover can successfully replace the existing one, you must include !important after each updated background image.

DEMO

Answer №2

When you apply inline styles to li elements, it may override the properties set by your CSS :hover selectors. To prevent this from happening, use the !important keyword in your CSS declaration:

li#one:hover{
    background-image: url(http://i1287.photobucket.com/albums/a628/botpro7/1_hover_zps6b4b99c1.png)!important;
}

Answer №3

The issue you were facing arose from setting the background inline using a CSS property in jQuery. To resolve this, I have created a demo that provides a solution.

VIEW DEMO

I eliminated the section of code responsible for inserting the background and simply added an .active class to your code. This way, when the user clicks on the element, I apply that class to it. I hope you find this helpful!

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 is causing this faint red line to persist within the parent container?

https://i.sstatic.net/U3dyK.png How can I get rid of the red line on the left side that is not disappearing, even though I've set the child div to white with a width of 50%? body{ height: 100vh; position: relative; } .main-container{ width: ...

Conceal the scrollbar when the expansion panel is in its collapsed state

One issue I am encountering is that the scroll-bar appears when the expansion panel is collapsed, but not when it's expanded. Here are the references: Collapsed Expanded <mat-expansion-panel class="panel"> <mat-expansion-panel-he ...

What's the best way to vertically center text in a div with overflow hidden?

In my ASP GridView, I am trying to display a table with a fixed number of lines in each TD element. To achieve this, I have decided to place a div inside each TD so that I can customize the height and layout. table.XDataGridView td div.inner-table-div { h ...

HR | extends all the way down the table, creating a vertical boundary

I am currently working on developing an Email Signature Generator. My goal is to extend the blue line (visible in the program) all the way down without affecting the layout of other elements. I suspect that because everything is contained within a table, a ...

Is it possible to alter objects through the use of jQuery.map?

I'm working with a key-value pair that looks like this: var classes = { red: 'Red', green: 'Green' }; Is there a way to add a specific value before each key in the pair? Can jQuery.map help with this task? The desired end result ...

Select the send all text option when making a request

Using ajax, I can dynamically fill a drop-down select menu. My next step is to include all the text from the selected options in my request. <select name=".." > <option value="0"> ... </option> <option value="1"> xxx </option ...

Avoid sudden page movements when validating user input

After successfully implementing the "Stars rating" feature from https://codepen.io/462960/pen/WZXEWd, I noticed that the page abruptly jumps up after each click. Determined to find a solution, I attempted the following: const labels = document.querySelect ...

Tips for successfully passing multiple data IDs in a Bootstrap modal

Greetings! I am currently facing a challenge with passing multiple data IDs into a bootstrap modal. When I manually assign the data IDs, everything works perfectly: <a id="testB" href="#my_modal2" data-toggle="modal" data-book-id='{"id":10,"name ...

Collect form input data containing a binary image and showcase it in a view using webapi

I am currently working on a webapi project using MVC architecture. The project involves converting a jpg image to binary data, sending it to a SQL server, and then retrieving the form data along with the image back as a jpg for display on the view. Althoug ...

What steps can be taken to default to a Google web font when Helvetica is not available on the user's device?

Is there a way to have a font fall back to a specific one on Google Web Fonts (Open Sans) if the user does not have Helvetica installed? I'm looking for an efficient method where downloading the font is only necessary if needed. For example, I don&ap ...

How to fetch images from a database in CodeIgniter by utilizing JSON and AJAX functions?

Trying to retrieve an image using ajax/json format for the first time, all variables are displaying except the image. The name of the image is visible when inspecting the element in the browser and it is saving correctly into the image folder. I need help ...

Why is the session variable in PHP failing to store the value?

Could you assist me with the following PHP code snippet? I'm trying to ensure that when the update function is called, the session variable 't' increments its value. However, every time I run the code, the output remains at Value: 1. What ad ...

Implementing conditional statements using jQuery for multiple selections

Having two unique IDs, I am planning to set a condition that corresponds with my query. $("#foo", "#bar").foo.bar({ baz: function() { if(selector == "#foo") { console.log("foo"); } else { console.log("bar"); } } }); ...

I've exhausted all options from stackoverflow with no success. Google Chrome's Autofill feature is wreaking havoc on my theme. Any suggestions on how to tackle this issue?

I designed a template with a stunning CSS layout. All I want is to have a transparent background with white font color, but Google Chrome seems to be causing issues with my theme. What steps should I take? I've exhausted all resources available onlin ...

What could be the reason behind my Javascript code returning "object object"?

I am a beginner with jQuery. I attempted to calculate the sum of items from my django views using jQuery. Here's what I have so far: $(document).ready(function() { var sch = $('#sch-books'); var gov = $('#gov-books'); ...

Place your cursor over the following element to take control

There is a paragraph that needs to be clipped when hovered over. An issue arises where the H1 text shifts its position. Only the phrase "HOVER ABOVE PARAGRAPH" should be concealed. * { margin: 0; box-sizing: border-box; } .wrapper { displ ...

Display fewer search results initially and have the option to view more when hovering

I am working with a PHP function that generates a ul element. <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> I am looking to display the list in a li ...

Switch website address without redirecting via JavaScript

I am seeking information on how to update the URL without a full page reload, similar to the functionality seen on this website . When clicking on tabs, the URL changes seamlessly without refreshing the entire page. While some sources suggest that this m ...

Applying personalized CSS to an element based on the condition of a child element in the previous sibling element

I am trying to apply styles to a span element only when a child element in a preceding sibling div element is active, which means a radio button has been checked. I am unable to modify the code and can only use CSS for this task. Any ideas on how to achi ...

Web browser local storage

Looking to store the value of an input text box in local storage when a button is submitted <html> <body action="Servlet.do" > <input type="text" name="a"/> <button type="submit"></button> </body> </html> Any sug ...