Method One:
<style>
. PP A
{
width:575px;
height:157px;
Background:url (1.jpg);/* Picture address */
Display:block;
}
. pp A:hover
{
width:575px;
height:157px;
Background:url (2.jpg); */* Replace the picture address */
Display:block;
}
</style>
<body>
<div class= "pp" ><a href= "#" ></a></div>
</body>
Method Two:
Link: the usual state
Visited: after being visited
Hover: When the mouse is put on
Active: When pressed
The four properties of hyperlinks in CSS are generally normal in order: Link,visited,hover,active must be written in the order above, otherwise the display may be different from what you expected.
<style type= "Text/css" >
*{margin:0; padding:0;}
ul li{List-style:none;}
. nav{width:800px; height:40px; margin:150px Auto;}
. Nav ul li{float:left; width:200px;}
. Nav ul Li a:link,a:visited{display:block; width:190px; height:40px; Background:url (1.jpg);} /* Link, after click */
. Nav ul Li A:hover{background:url (2.jpg);} /* Mouse over * /
. Nav ul Li A:active{background:url (3.jpg);} /* When clicked * /
</style>
<body>
<div class= "NAV" >
<ul>
<li><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
</ul>
</div>
</body>
CSS mouse move to button picture change
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
