Home >Web Front-end >CSS Tutorial >Why Isn't My Background Color Changing on Hover?

Why Isn't My Background Color Changing on Hover?

DDD
DDDOriginal
2024-12-17 16:14:19470browse

Why Isn't My Background Color Changing on Hover?

Transition Effect for Background Color on Hover

You're attempting to create a transition effect for the background color when hovering over menu items, but it isn't working.

Cause:

As mentioned in the accepted answer, CSS transitions for background-color may not be compatible with older versions of browsers. Browsers like Internet Explorer versions below 10 do not support CSS transitions for background-color.

Solution:

To ensure cross-browser compatibility, use vendor prefixes or a fall-back property:

a {</p><pre class="brush:php;toolbar:false">background-color: #FF0;

}

a:hover {

background-color: #AD310B;
-webkit-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;

}

This code uses vendor prefixes (-webkit- and -ms-) for Safari and Internet Explorer, respectively, and includes the standard transition property for other browsers.

The above is the detailed content of Why Isn't My Background Color Changing on Hover?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn