Unable to swap out image when hovered over

This is a new issue for me, as I can't seem to understand why the hover effect is working, but the background image won't change:

<div class="settings" id="settings" style="background-image:url(assets/settings.svg);"></div>

.settings{
  width: 2.0vw;
  height: 2.0vw;
  margin-top: calc((8vh - 2vw)/2);
  margin-left: 1.5vw;
  float: left;
  background-position: center;
  background-size: contain;
}
.settings:hover{
  background-image: url("assets/settingsH.svg");
}

To confirm that the image is present, if I specify assets/settingsH.svg in the HTML - it will display the hover image.

If I adjust the size on hover, the hover effect works, but the background image remains the same.

No other hidden settings class was identified.

htmlcss

Answer №1

The reason for this issue is that the background image was placed inline with the html. To change it using CSS, you need to add !important like this:

.settings:hover{
    background-image: url("assets/settingsH.svg")!important;
}

Alternatively, it is recommended to define the background in the CSS:

.settings {
  width: 2.0vw;
  height: 2.0vw;
  margin-top: calc((8vh - 2vw) / 2);
  margin-left: 1.5vw;
  float: left;
  background-position: center;
  background-size: contain;
  background-image: url("https://via.placeholder.com/400/0000FF");
}

.settings:hover {
  background-image: url("https://via.placeholder.com/400/FF0000");
}
<div class="settings" id="settings"></div>

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 the best way to create a div that maintains a consistent size while displaying images inside?

Struggling with a project and attempting to create a fixed div container for uniform picture sizes, I've tested various methods recommended by others but have had zero success in altering the size of my div container. Could it be due to my use of boot ...

htmlcsstwitter-bootstrapbootstrap-4

Utilize HTML to place text above an image within a TextView

While working with a list of Strings that I add to TextViews individually, I encounter an issue with displaying images alongside the text. The HTML format allows me to include images within the text, but currently, the image appears below the text instea ...

javaandroidhtml

"Switching Classes with a Click Event: A Step-by-

This script is designed to work with SoundCloud's widget in order to enable remote text buttons. I am attempting to modify it so that it functions as a remote for an image button that toggles between different pictures for pause and play, rather than ...

javascriptcssjquery

Troubleshooting issue with Bootstrap's responsive scrollspy functionality

I am experiencing an issue with the responsiveness of my page. When I reduce the width of the page to half, the scrollspy disappears unexpectedly. I am unsure about the root cause of this problem. If you run the code I have shared here, you can observe th ...

javascripthtmlcssbootstrap-4

Error occurred during download or resource does not meet image format requirements

Encountering an issue when attempting to utilize the icon specified in the Manifest: http://localhost:3000/logo192.png (Download error or invalid image resource) from the console? import React from 'react'; import Logo from '../Images/logo1 ...

javascripthtmlcssreactjsbrowser

Is there a way to start playing HTML5 Audio without having to wait for the entire buffering process to finish

My internet connection is fast but it still takes 2-3 seconds for the song to start playing. The file size is around 3mb-4mb, with an average bitrate of 128kbps MP3. I've tried setting preload="auto" but it didn't improve much. Is there a way to ...

htmlaudio

Achieving compatibility with IE7 for utilizing "before:" and "after:" pseudo-elements along with the "box-sizing:border

My website is constructed with twitter bootstrap 3 and functions perfectly on all browsers except for IE7. IE7 seems unable to interpret pseudo classes like before:, after:, and box-sizing: border-box. Is there a solution to make IE7 understand this code ...

cssinternet-explorer-7twitter-bootstrap-3

HTML Canvas resizing challenge

My goal is to resize the canvas to fit inside its parent div within a Bootstrap grid, but I'm running into an issue where the canvas keeps expanding to 2000px x 2000px. Despite successfully resizing based on console.log outputs showing the same dimens ...

javascripthtmlcssbootstrap-4html5-canvas

Display specific data within the <td> tag

I am attempting to display a specific value that is located within a <td> element. The values are retrieved from a webpage and they are structured as follows: <b>General Information</b> <table width="400"> <tr> ...

htmlpython-3.xparsing

Tips for using jQuery to slowly change a CSS property to "auto"

I've encountered a situation where I have an element styled with position:fixed, and bottom: auto;. When I apply the command .animate({bottom : '10%'});, it smoothly slides to the specified position. However, when I try to set it back to its ...

javascriptjqueryhtmlcssjquery-ui

Utilizing Google Maps API version 3 to display various groups of markers

I am encountering an issue while trying to plot fixed markers and a user position marker on a Google Map. I want to use different images for these markers, but something strange is happening. When the page loads, all fixed markers show up correctly initial ...

javascripthtmlgoogle-mapsgoogle-maps-api-3

Creating a Text Design with a Right Arrow Symbol using HTML and CSS

I am looking to create a minimalist design using bootstrap, html, and css. The design should resemble the image found at this link: https://i.sstatic.net/WIgHJ.png I have attempted the following code to achieve the design: <div class="contain ...

htmlcssbootstrap-4

Display corresponding div elements upon clicking an HTML select option

Is there a way to make a div visible when a corresponding select option is clicked, while hiding others? My JavaScript skills are lacking in this area. CSS #aaa, #bbb, #ccc { display:none; } The HTML (I'm using the same id name for option and d ...

javascripthtmlcsshtml-select

Changing the sliding underline effect in a jQuery navigation bar

Recently, I implemented a sliding underline element in my navigation bar. The idea is that when a link is hovered over, the underline smoothly transitions to that element. You can take a look at the codepen example here: https://codepen.io/lucasengnz/pen/e ...

javascriptjqueryhtmlcss

Tips for emphasizing a specific cell in a row based on its expiration date

In my quest to find a script that colors dates within two weeks from today in red and past dates in orange, I have tried various methods without success. I am struggling to implement this feature with my current knowledge. <TABLE> <TR><TD&g ...

javascriptphpjquerycss

Using Styled Components to achieve full width for input tag in relation to its parent

I am working with an input field that has a specific width set. My goal is to increase the width of this input field to 100% by selecting it from its parent component. Is there a way to achieve this without passing an explicit width prop in the styled c ...

javascripthtmlcssreactjsstyled-components

Target specifically the onhover div element using JQuery and trigger the smooth sliding down effect with the SlideDown() function

Is it possible to create a unique JQuery slidedown() function that will only be applied to the div where the mouse is hovering? I have managed to make it work by giving each div a separate class, but when I name them all the same, it triggers the slide do ...

javascriptjquerycss

Building a theme with TypeScript in React

As I embark on my React project, I've been tasked with creating a CSS using TypeScript while referring to the color palette diagram provided below. Utilizing createMuiTheme to build the theme, I've realized that there are various possible conditi ...

cssreactjstypescript

What is the best way to utilize toggle("slide") in order to reveal a message letter by letter?

I am currently experimenting with the `.toggle("slide") function to create an effect where a piece of text appears as though each letter is sliding in. However, I've noticed that instead of a smooth slide, it looks more like the text is flying in abru ...

javascriptjqueryhtmlcss

Transform a REACT js Component into an HTML document

I'm working with a static React component that displays information from a database. My goal is to implement a function that enables users to download the React component as an HTML file when they click on a button. In essence, I want to give users ...

javascripthtmlreactjs