How to Correctly Target a Button for Hover Color Change?

How to Alter Button Color on Hover Effectively

In order to modify a button's color when it's hovered over, follow these steps:

The provided code doesn't function because "a.button a:hover" targets a link within a button that is being hovered over. Instead, use "a.button:hover" to directly target the button when it's hovered.

Here's the corrected code:

a.button {
  display: -moz-inline-stack;
  display: inline-block;
  width: 391px;
  height: 62px;
  background: url("img/btncolor.png") no-repeat;
  line-height: 62px;
  vertical-align: text-middle;
  text-align: center;
  color: #ebe6eb;
  font-family: Zenhei;
  font-size: 39px;
  font-weight: normal;
  font-style: normal;
  text-shadow: #222222 1px 1px 0;
}
a.button:hover {
  background: #383;
}

This modification will successfully alter the button's color when it's hovered over.

The above is the detailed content of How to Correctly Target a Button for Hover Color Change?. For more information, please follow other related articles on the PHP Chinese website!