Home > Article > Web Front-end > How to set the mouse to change the background in css
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.
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>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!