CODEWITHSUNDEEP
htmlcsshover
Bob Ray
Bob Ray

Reputation: 1172

Weird hover behavior in IE 11 and Firefox

I have a fairly simple hover effect on a span inside a button

HTML:

<span class="content">text</span>

CSS:

span.content:hover {
     background-color: #2b9385;
     background-image: linear-gradient(#2b9385, #007571);
    color: red;
}

When I hover over the span, it works fine in Edge and Chrome. In Firefox and IE 11, nothing happens.

Here is the weird part. If I use the dev. tools and inspect the element with hover checked, the CSS changes to the correct values and the background of the span changes correctly on the screen, it just doesn't work when I actually hover over it with the mouse. If I add "color:blue" to the hover section, the text color changes as it should when I hover over it, only the background part doesn't work.

I've tried adding vendor prefixes to the linear gradient part, but it didn't help (and shouldn't be needed in either case). Using #hex color values also didn't help.

Any clues appreciated.

I've added a Pen so you can see that it works in Chrome but not in FF. If you inspect the .content span in Firebug and click on the hover checkbox, the styles will be applied correctly, even though hovering over the button does nothing.

Pen

Upvotes: 0

Views: 595

Answers (2)

Anil K.
Anil K.

Reputation: 251

Just try this. It will definitely help.

.progress-button:hover span#button_content.content {
    background-color: #2b9385;
    background-image: linear-gradient(#2b9385, #007571);
    cursor: pointer;
    color: red;
}

Upvotes: 1

Anil K.
Anil K.

Reputation: 251

I think you are missing colon(:) so just try this

background-image:(red, orange);

Upvotes: 0

Related Questions