How to set the mouse to change the background in css-CSS Tutorial-php.cn

How to set the mouse to change the background in css

藏色散人

Release： 2020-11-17 11:03:28

Original

2808 people have browsed it

Css method to set the mouse to change the background: first open the corresponding front-end code file; then set the style to ".logo-link {background-image:url(...);}.logo-link:hover ,.logo-link:active {}" is enough.

How to set the mouse to change the background in css

Recommended: "css video tutorial"

CSS code to realize changing the background image by moving the mouse over

Many times we can see that when we move the mouse over, the pointed picture will change into another picture. Below I will share the code that implements this function, hoping to help everyone.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <style type="text/css">
  .logo-link {
width:500px;
height:500px;
text-decoration:none;
display:block;
background-image:url(bj1.jpg);
background-position:0px 0;
background-repeat: no-repeat;
  }
  .logo-link:hover,.logo-link:active {
background-position:0 0;
background-image: url(bj2.jpg);
  }
  </style>
 </head>
 <body>
<a href="http://www.baidu.com" class="logo-link"></a>
 </body>
</html>

Copy after login

The above is the detailed content of How to set the mouse to change the background in css. For more information, please follow other related articles on the PHP Chinese website!