Unexpected behavior with gifs in CSS :hover Selector

I've been experimenting with new button styles and running into a challenge: my <button> CSS :hover selector is not working as intended.

Despite multiple attempts, I have not been able to get it to function correctly.

Any suggestions on how to achieve this successfully?

Here's the code I'm currently using:

.button_depression {
    background: url(http://67.media.tumblr.com/tumblr_m9atx55D6F1qd1e6no1_400.gif) no-repeat;
    border: 0;
    color: #ffffff;
    padding: 5px 35px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    cursor: pointer;
    border-radius: 5px;
    font-family: Times New Roman;
    transition-duration: 0.5s;
}

.button_depression:hover {
    background-color: #959595;
}
css

Answer №1

Instead of using background-color, you can achieve the desired hover effect by simply using background as shown in the example below:

.button_depression:hover {
    background: #959595;
}

Summary:

background is a CSS property that serves as a shorthand for setting various background-related properties such as color, image, position, and more. When used without the shorthand, it's important to note that background-image takes precedence over background-color.

To ensure the desired result, you can explicitly set background-image: none; along with background-color: #959595; (see example below).

.button_depression:hover {
    background-color: #959595;
    background-image: none;
}

(Alternatively, consider using background-image: unset; but compatibility across all browsers may vary.)

It's worth noting that achieving the same outcome using the simple background: #959595; shorthand is possible and results in cleaner, concise code.

For further information, refer to this resource ...

Answer №2

The button hover effect does not change the background color due to the presence of a background image. To achieve the desired effect, you can set the button image to None on hover and then change the color. Another option is to simply set the background to the desired color. It all depends on your preference for achieving this.

.button_depression {
    background: url(http://67.media.tumblr.com/tumblr_m9atx55D6F1qd1e6no1_400.gif) no-repeat;
    border: 0px;
    color: #ffffff;
    padding: 5px 35px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    cursor: pointer;
    border-radius: 5px;
    font-family: Times New Roman;
    transition-duration: 0.5s;
}

.button_depression:hover {
    background: None;
    background-color: #959595;
}

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

Utilize Bootstrap's table-hover feature in combination with rowspan to effectively highlight every row associated with a specific

I am attempting to replicate the functionality of the table-hover class on a Bootstrap table that contains multiple cells with different rowspan values. This means I want to highlight every cell within the same row. Below is an example demonstrating the cu ...

htmlcssbootstrap-4hover

Utilizing the ApexCharts feature for cursor pointer functionality

I utilized apexcharts.js to create a bar chart in JavaScript and now I need help changing the cursor to a pointer. Any assistance would be greatly appreciated! Here is my code: var options = { series: [{ name: 'series1', data: [60, 85, ...

javascripthtmlcssapexcharts

How to properly position the h1 heading in relation to the navigation bar

Web developer specializing in server-side technologies here, venturing into the world of styling for the first time. I recently attempted to recreate the header section with the id=topbar from a specific website. Despite my efforts to align the h1 element ...

css

Tips for using CSS in React to keep a component fixed at the bottom until the user reaches the footer

Working on a project with React and CSS in JS using Emotion. I am facing an issue where I need a button to stick at the bottom of the viewport on mobile, until the user scrolls to the footer. Once they reach the footer, the button should then be fixed at t ...

cssreactjsmaterial-ui

Is there a way to restrict the width of a column in a v-data-table?

I'm trying to restrict the width of the Video title column in my headers by using the width: '30%' property. However, despite setting this value, the column width still exceeds the specified percentage. I also attempted using maxWidth: &apos ...

htmlcssvue.jsvuetify.js

Styling checkboxes using jQuery and replacing them with images

I'm looking for help with a script that will hide my checkboxes and replace them with styled checkbox images. The script I have hides the checkboxes and displays the default image, but it doesn't update the checkbox state or image when clicked. I ...

jqueryhtmlcss

The min-height property does not seem to be compatible with -webkit-calc

I've been experimenting with this code: .main{ min-height: -moz-calc(100% -50px); min-height: -webkit-calc(100% -50px); min-height: calc(100% -50px); background-color:#000; color:white; } html{ height:100%; } <html ...

htmlcss

"Creating a Two-Column Layout with ASP.NET Core and Bootstrap through POST

I have been working on a simple form for testing and learning purposes. Initially, I used Scaffold New Razor Page in VS to create the form. Afterward, I attempted to modify it in order to have two columns on the create page. Despite trying various methods ...

cssasp.net-corebootstrap-4

"Exploring the Differences in Bootstrap Input Boxes Between Mobile and Tablet/Desktop Devices

Currently working on a Wordpress theme that utilizes Bootstrap for a website. Everything looks great on desktop and tablet, but when the window is resized to mobile size, the search input in the navbar gets misaligned. Any suggestions on how to fix this? ...

csstwitter-bootstrapforms

Challenges with the direction of Telerik's GridNumericColumn

Currently, I have implemented a telerik RadGrid with the direction set to RTL. Within this grid, there is a telerik GridNumericColumn which is causing an issue. The problem lies in the way it displays numbers: 500- instead of -500 I am seeking adv ...

c#asp.nethtmlcsstelerik

Creating a scrollable panel using CSS is easy with a solid border and a panel element

Using Vaadin to design my front-end, I encountered an issue where adding border-style:solid to the style.css file resulted in a scrollable v-panel. How can I retain the solid style while removing the scrolling feature? Please refer to the screenshot for cl ...

cssformborderstyle

Configure the input to accept integer values

This page that I have developed is designed for entering Latitude and Longitude values. <div class="container "> <form class="entry"> <div class="aligncenter"> <h5 style="color:MediumTurquoise; font ...

javascriptjqueryhtmlcssjson

What is the best way to align div elements side by side while using a flex direction of column?

I need help aligning the text input next to the h1 tag, inline, and then displaying it as a flex-direction of column. Currently, all inputs are being set in a line with the h1 on top which is not the intended layout. Here is an illustration: https://i.sst ...

htmlcssreactjs

What is the best way to add a gradient background image to a container that also has margins?

I am currently working on a push menu that shifts the main content container by adding margin-left to it. I am aiming to achieve a background image effect similar to what is seen on . Here is the progress I have made so far in my codepen: https://codepen ...

htmlcss

Using Vanilla CSS with React?

This is my first time working on a react app and I'm a bit unsure of the best approach to styling components. Currently, I am creating a separate .css file for each component or page, and including it implicitly. While this method seems the simplest, ...

javascriptcssreactjs

Showing no background color until the user lifts their finger

I am currently in the process of developing a website. The navigation on the website starts off as transparent (background: transparent) when opened, but as soon as you start scrolling, it should transition to a colorful state with shades like grey, midnig ...

javascriptjqueryhtmlcss

Storing a screen value with javascript made simple

I need to incorporate memory functions into my calculator, specifically MS (Memory Store), MR (Memory Restore), and MC (Memory Clear). For Memory Store, the screen value of the calculation needs to be saved, so if it's 90 + 7 = 97, that result should ...

javascripthtmlcssevents

Having trouble extending my navbar to the full height of the window

Having an issue with my code regarding the menu. I am trying to create a navbar that fills the height on the left side for PC screens and becomes scrollable at the top for mobile versions. The problem lies in my flex container not properly filling the scr ...

htmlcssflexbox

Using CSS3 to Enhance the Look of Multiple Background Images

While I've come across similar inquiries, I haven't found a satisfactory explanation yet. My aim is to grasp the best CSS practices for implementing multiple repeating backgrounds. Essentially, I want a background image to repeat across the entir ...

htmlcss

I am interested in implementing a deep concept that involves multiple page effects using SCSS, but I do not want this effect to be applied to just one page within

Within the shared folder, there is an Auth folder with components. In auth.component.scss, we have written some CSS that acts as a parent to all components, affecting their styles. However, I do not want it to affect component 'y'. Currently, all ...

cssangularsassscss-lint