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 developing a sophisticated HTML quiz

I have spent countless hours perfecting this quiz. I have successfully created a quiz that reveals solutions at the end, but I want to take it one step further. I envision the answers appearing after each incorrect response from the user, and no answer sho ...

javascripthtml

Alignment issues in buttons within Bootstrap

I'm facing an issue with the code snippet below <div className="row"> <div className="col-md-3"> <DateTimePickerComponent id="dateFrom" ...

csstwitter-bootstrapbootstrap-5

Guidelines for implementing drag and drop functionality for my specific scenario

Looking to create a restricted area for dragging elements within my app. Specifically, I want the element to only be draggable within a certain defined space. Here is what I currently have: http://jsfiddle.net/L73T5/10/ html <div id='background ...

javascriptjqueryhtmlcss

Use jQuery to choose specific images, then duplicate the chosen image's "href" attributes

On my webpage, there are several images loaded in a specific format: <a class="something" href="1.html"> <div class="something"> <img alt="name" src="https://www.homepage.com/.1.jpg"/> </div> </a> I am lo ...

jqueryhtml

How to attach input to function invocation in Angular 2

Can we connect the @Input() property of a child component to a parent component's function call like this: <navigation [hasNextCategory]="hasNextCategory()" [hasPreviousCategory]="hasPreviousCategory()" (nextClicked)="next ...

javascripthtmlcssangularjsangular

Element that emulates a different element in HTML

Is it possible to have one element that can control and change multiple clone elements, mimicking every change made to the original? While JavaScript & jQuery can easily achieve this, most solutions involve separate variables or instances for each element ...

javascripthtmldom

Issue with Datepicker functionality within the <th> element is causing it to malfunction

Currently, I am attempting to utilize the Bootstrap datepicker, but I am facing an issue when trying to implement it within a table, specifically inside a th element. Below is the structure of my table: <table id="table" class="table table-bord ...

htmlcsstwitter-bootstrap

extracting characters in php

Here's the HTML code I'm working with: <p style="color:red;font-size:12px;">This budget-friendly car offers great value, complete with air conditioning making it perfect for couples and small families. There is a ?500 excess, but it can be ...

phphtmlsubstring

HTML stops a paragraph when encountering a script within the code

Everything in my code is working correctly except for herb2 and herb3, which are not displaying or utilizing the randomizer. I am relatively new to coding and unsure of how to troubleshoot this issue. <!DOCTYPE html> <html> <body> ...

javascripthtml

Retrieving data from a specific field within a table cell

Why does the value of the select box not get passed in my form scope when it is within its own table cell, but works when the whole form is in a single table cell? Below are examples of working and non-working code: WORKING <tr> <td> ...

htmlformsselect

Navigating through pages using Jquery's show and hide functionality

How come my item is not returning? I used the .show() method on the item. <div id="back">< back</div> <div class="item">item</div> <div class="content">My content</div> $(function(){ $('.item').on(&apo ...

javascriptjqueryhtml

Unable to retrieve table header information when clicking on a table cell

My code is working perfectly, except for the fact that when I click on a cell, I cannot retrieve the table header text. Retrieving the row text works fine based on the code. If I use Object.keys(data) inside the alert function to retrieve the data, it give ...

javascripthtmlcssreactjshtml-table

Perform an action when the timer reaches zero

I am working with a database entry that contains the following information: { _id:"fdjshbjds564564sfsdf", shipmentCreationTime:"12:17 AM" shipmentExpiryTime:"12:32 AM" } My goal is to create a timer in the front end ...

javascripthtmlnode.jsreactjsweb

What is the best way to position my content next to my sticky sidebar for optimal visibility?

Just starting out with coding and tackling my initial project using reactJs and bootstrap 5. My aim is to create a sticky side navbar that remains fixed on the side while my content displays next to it, even when navigating through different routes. Unfort ...

javascriptcssreactjsreact-bootstrapbootstrap-5

What could be the reason behind an Ajax Auto-Complete feature suddenly malfunctioning when moving to a new page within the same website?

Working on a website featuring an auto-complete search box powered by Ajax, Javascript, and PHP. As the user types into the search box, an ajax request triggers a php file to query a database and return possible results. Everything works smoothly until the ...

javascriptphphtmlajaxautocomplete

What could be causing the occasional appearance of a tiny glitch, like a pixel dot, below a menu item when utilizing this hover effect?

Occasionally, a tiny dot appears almost imperceptibly, like the one below the "prices" menu item: https://i.stack.imgur.com/kyaP3.png This is the hover effect code I created: :root { box-sizing: border-box; } *, *::before, *::after { box-sizing: ...

htmlcsscss-transitions

Using Javascript/JQuery to attach a javascript object to a form in order to perform a traditional form

On a page, there is a form that consists mostly of plain HTML. One section of the form creates a quite complex multidimensional object using JavaScript. Usually, if I wanted to include a variable in the POST request, I would add an <input type="hidden" ...

jqueryhtmljsonpost

Initializing the $(this) variable prior to the function declaration

I am faced with the task of performing multiple checks based on the IDs of certain elements, all of which vary slightly. So, I created several functions to handle this, and rather than repeatedly using $(this).children ..., I wanted to create a short vari ...

javascriptjqueryhtmlvariablesglobal-variables

Aligning a bootstrap grid in the center for mobile devices

I've encountered an issue where my 2×3 grid of images and text is perfectly centered on desktop but has a strange offset on mobile devices. Here's how it appears on the desktop: https://i.sstatic.net/HXqFq.jpg and here's the layout on mob ...

htmlcssbootstrap-5

Exploring Bootstrap: Understanding column stacking and the requirement for a new row to stack upon resizing

I am currently mastering Angular and Bootstrap for a potential job opportunity, so I have decided to create a simple demo page. However, I am facing an issue with getting a new row to stack after the last div of the previous row when resizing. Initially, m ...

htmlcssangularjstwitter-bootstrap