I found many methods on the Internet, some of which use Js. Here I use a simple CSS method, which is very practical.
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> untitled document </title>
<Style>
. PP
{
Width: 575px;
Height: 157px;
Background: url(1.jpg);/* image address */
Display: block;
}
. Pp a: hover
{
Width: 575px;
Height: 157px;
Background: url(2.jpg);/* Replaced image address */
Display: block;
}
</Style>
</Head>
<Body>
<Div class = "PP"> <a href = "#"> </a> </div>
</Body>
</Html>
Link: normal status
Visited: After being accessed
Hover: When the mouse is placed
Active: When pressed
The four attributes of the hyperlink in CSS are generally in the normal order of link, visited, hover, and active, which must be written in the above Order. Otherwise, the display may be different from what you expected.
Display: block is to convert this line into a block element. I am not sure why, but I just want to add
If there is any text, you may need to add a sentence so that the hyperlink does not have a slide line.Code
This is a column of buttons.
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
untitled document
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
