RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/en-US/docs/Web/CSS/:hover below:

:hover - CSS | MDN

.joinBtn {
  width: 10em;
  height: 5ex;
  background-color: gold;
  border: 2px solid firebrick;
  border-radius: 10px;
  font-weight: bold;
  color: black;
  cursor: pointer;
}

.joinBtn:hover {
  background-color: bisque;
}

<p>Would you like to join our quest?</p>
<button class="joinBtn">Confirm</button>

Styles defined by the :hover pseudo-class will be overridden by any subsequent link-related pseudo-class (:link, :visited, or :active) that has at least equal specificity. To style links appropriately, put the :hover rule after the :link and :visited rules but before the :active one, as defined by the LVHA-order: :link â :visited â :hover â :active.

Note: The :hover pseudo-class is problematic on touchscreens. Depending on the browser, the :hover pseudo-class might never match, match only for a moment after touching an element, or continue to match even after the user has stopped touching and until the user touches another element. Web developers should make sure that content is accessible on devices with limited or non-existent hovering capabilities.

Syntax Examples Basic example HTML

<a href="#">Try hovering over this link.</a>

CSS

a {
  background-color: powderblue;
  transition: background-color 0.5s;
}

a:hover {
  background-color: gold;
}

Result Specifications Browser compatibility

Loadingâ¦