Hovering over an element will change its background color along with adjusting the background

I encountered a situation with the following code:

CSS:

<style>
    div.testy {
        border:1px solid black;
    }

    div.testy:hover {
        background-color:red;
    }
</style>

HTML:

<div class="testy" style="height:100px; 
background: url('down.png') no-repeat; background-size:contain;">
    aa
</div>

'down.png' is an image with a transparent background. My goal was to change the background color while still displaying the image in front of it.

The code above seems to be almost correct, but when I hover over the div, nothing happens as expected.

QUESTION: What could be causing the issue with hovering and changing the background color?

Check out this jsfiddle link for a demonstration of the problem: https://jsfiddle.net/sdsze2fv/

htmlcsshoverbackground-color

Answer №1

The issue lies in using background: to define the "background image". To distinguish between a background image and a background color, utilize background-color for color and background-image for images.

div.testy {
        border:1px solid black;
    }

    div.testy:hover {
        background-color:red;

    }
<div class="testy" style="height:100px; 
background-image: url('http://www.w3schools.com/html/html5.gif'); 
background-size:contain;">
    aa
</div>

Answer №2

The reason behind this occurrence is that you have already specified the background inline within your HTML code. Inline styles always take precedence over styles defined in a CSS file unless the style has been marked with !important.

My suggestion would be to include only the background-image in your inline style, while setting the background-color in your CSS file.

div.testy {
  border:1px solid black;
}

div.testy:hover {
  background-color:red;
}
<div class="testy" style="height:100px; 
background-image: url('down.png'); background-repeat: no-repeat; background-size:contain;">
    aa
</div>

Answer №3

When setting the background inline, it takes precedence over the CSS rule. Inline styles always have a higher priority (except for styles with !important). To make it work, you can remove the inline style and place it in a CSS rule. Another solution is provided here:

JSFIDDLE

In this case, we specify 'hey, I want the background image to be this' instead of just the background, which includes the image, color, repeat, etc. This shorthand method also sets the background color, causing it to override the hover effect.

Alternatively, you can remove the inline style and include it in the CSS rule without any changes, and it will work as expected.

JSFIDDLE2

div.testy {
   border:1px solid black;
   height: 100px;
   font-size: 25px;
   color: orange;
   background:  url('https://upload.wikimedia.org/wikipedia/commons/3/3a/Gluecksklee_(transparent_background)2.png') no-repeat;
   background-size: contain;
}

div.testy:hover {
   background-color:red;
}

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

Tips for sending an email without using MAILTO in JavaScript or jQuery

Today is a great day for many, but unfortunately not for me. I've been struggling with this issue for over two weeks now and can't seem to find a solution anywhere on the internet. Stack Overflow always comes to my rescue when things get really t ...

javascriptjqueryhtmlemail

Selecting items from a list at random using the power of math.random() and math.floor()

When attempting to randomize the popping of elements in a list stored in the baby variable, only baby[1] is being popped. How can I make it pop random elements? <body> <h1 id="1">bebe</h1> <h1 id="2">t ...

javascripthtml

Modify radio button colors upon selection with a variety of colors

Looking to create Yes/No buttons that start with a default state of null and change color when pressed - green for yes, red for no. Check out this example code: <label class="formheading">Apparatus group is correct</label> <fieldset data-r ...

javascriptjqueryhtmlcssjquery-mobile

How to center the navigation text on a WordPress website within the header.php file

Check out my website at I'm looking to center the navigation menu under the image. I've attempted multiple methods but can't seem to figure it out. Here's a snippet from the header.php file: <center><img src="http ...

csswordpresscenter

Transfer data from href link to specific detail page

I am currently working on a table that displays all the users. My goal is to turn the usernames into clickable links that direct you to their profile page. What steps should I take to convert the username into an href link and send it to the detail page? ...

phphtmlvariableshyperlink

The HTML required attribute seems to be ineffective when using AJAX for form submission

Having trouble with HTML required attribute when using AJAX submission I have set the input field in a model Form to require attribute, but it doesn't seem to work with ajax. <div class="modal fade hide" id="ajax-book-model" a ...

javascripthtmlajaxlaravel

Place a Button or Link Right Below the Title on the Custom Post Type Editing Page

I am currently working on customizing the backend of a WordPress site for a client by adding multiple custom post types. These custom posts are only meant to be displayed on the front-end through a specific loop on one page, preventing users from accessing ...

phphtmlwordpress

The information about the property is not appearing on the screen

I included the following CSS: nav label:AFTER { content: " ▾"; } However, when viewed in Chrome, it appears like this: content: " â–¾"; I have already added <meta charset="utf-8"/> to my JSP page and @CHARSET "utf-8"; in my CSS file. ...

cssspring-mvc

Unexpected background image slideshow appearance

I am encountering an issue with my slideshow where the last image briefly appears before the first image loads in a continuous loop. The offset of the initial image causes it to start at the middle of the window, and in Google Chrome and Safari, subsequent ...

javascripthtmlcss

Tips for dynamically assigning unique IDs to HTML form elements created within a JavaScript loop

let count = 0; while (count < 4) { $('#container').append("<div><input type='textbox' class ='left' id='left-${count}'/><input type='textbox' class ='right' id=' ...

javascriptjqueryhtml

Have the quotes within my markup been replaced with HTML entities?

Currently, I am working on a content page that uses a master page which includes a text box and a button. My goal is to have the button execute some JavaScript code before performing any other actions. At the moment, I am in the testing phase of this JavaS ...

javascripthtmlasp.net

Issue with Angular App: Bootstrap navbar not displaying on smaller screens

I am working on an Angular app (using Angular 11.2.4 with Bootstrap 4.5.3) and facing an issue where the navbar is not rendering correctly on screens smaller than ~580 pixels wide. Even when I click the toggler to 'expand' the collapse region, n ...

htmlangularbootstrap-4angular-ui-bootstrap

How to place text on top of a thumbnail in Bootstrap using HTML

I've come across similar questions here, but none of the suggested solutions have worked for me. (I attempted making the image a background as recommended on how to display text over an image in Bootstrap 3.1, but it didn't seem to be effective) ...

htmlcssimagetwitter-bootstrap

ng2-table ways to customize the appearance of a particular row

Hey there, I'm currently new to Angular 2 and working with ng2-table. I've successfully added a table like the one shown here to my website. Now, I'm trying to figure out how to add color to specific rows within the table. Following the ste ...

htmlcssangulartypescriptng2-bootstrap

Issues with mobile stylesheet loading properly

After migrating my website to a new server, I encountered an issue where the text displayed incorrectly on mobile devices but appeared fine on laptops. Surprisingly, when using Chrome's mobile viewer for inspection, everything looked as it should with ...

cssmobile

Why is the Slick Slider displaying previous and next buttons instead of icons?

I'm currently working on creating a slider using the slick slider. Everything seems to be functioning properly, but instead of displaying arrows on the sides, it's showing Previous and Next buttons stacked vertically on the left side. It appears ...

javascripthtmljquerycssslick.js

Redirecting and styling following an HTTP post operation

Implementing Stripe on my Firebase-hosted website. Utilizing a Cloud Function to handle the transaction. I have integrated the Stripe Checkout within a button displayed directly on my single HTML page, which then directs to the /charge function in inde ...

javascripthtmlhttpexpresspost

Deactivate an option within an angularjs multi-select menu

Currently, I am utilizing an angularjs multiselect box which is displayed below: https://i.stack.imgur.com/w6ffN.png Here is the html code snippet: <select multiple ng-options="Language.LangID as Language.LangName for Language in AllLanguages " ng-mo ...

htmlangularjsmulti-select

Tips on automatically populating a textbox without the need for a button click

I am currently using the following code: <input type="text" value="<?php echo empty($this->session->store['actual_info']['actual_total_marketing_budget']) ? '' : $this->session->store['actual_info' ...

javascripthtml

Is there a way to dynamically import several CSS files in React Native depending on the data stored in this.state?

How can I dynamically import multiple CSS files in a React Native project based on language? import React, { Component } from "react"; if(this.state.language === "he"){ import styles from "./he"; }else{ import styles from "./en"; } I attempted the ab ...

cssreact-native