How do we write this code when the mouse activates the background color? Let's sort out the idea: Set the part of a into a block element, and then define the style behind the mouse. CSS1: Hover only works on a element, CSS2: hover applies to all elements. Nor does IE7 support this standard in CSS2. So in order to adapt to all browsers or to be defined in a.
Let's look at the following XHTML code:
<div id= "Links" >
<ul>
<li><a href= "#" title= "CSS Web Design" >CSS Web Design<em>xhtml+css div+css-webjx.com</em> < Span>www.webjx.com</span></a></li>
<li><a href= "#" title= "CSS Web Design" >CSS Web Design<em>xhtml+css div+css-webjx.com</em> < Span>www.webjx.com</span></a></li>
</ul>
</div>
We write CSS code for the above XHTML:
#links ul {
List-style-type:none;
width:280px;
}
#links Li {
border:1px dotted #06f;
BORDER-WIDTH:1PX 0;
margin-bottom:16px;
}
#links Li a {
Color: #00f;
Display:block;
Font:bold 120% Arial, Helvetica, Sans-serif;
padding:8px;
Text-decoration:none;
}
* HTML #links li a {* * hover effect work in IE * *
width:280px;
}
#links Li A:hover {
Background: #f0f0f0; Color: #036;
}
#links a em {
Color: #666;
Display:block;
Font:normal 85% Verdana, Helvetica, Sans-serif;
line-height:125%;
}
#links a span {
Color: #999;
Font:normal 70% Verdana, Helvetica, Sans-serif;
line-height:150%;
}
We look at the final effect of the operation:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/><title>www.webjx.com</title><style type=" Text/css "> #links ul {List-style-typ E:none; width:280px;} #links li {border:1px dotted #06f; BORDER-WIDTH:1PX 0; margin-bottom:16px;} #links li a {color: #00f; Display:block; Font:bold 120% Arial, Helvetica, Sans-serif; padding:8px; Text-decoration:none;} * HTML #links li a {* * * hover effect work in IE/width:280px;} #links li a:hover {background: #f0f0f0; color: #036;} #links a em {color: #666; Display:block; Font:normal 85% Verdana, Helvetica, Sans-serif; line-height:125%; #links a span {color: #999; Font:normal 70% Verdana,Helvetica, Sans-serif; line-height:150%;} </style></pead><body><div id= "Links" > <ul> <li><a href= "#" title= "CSS Web Desi GN ">css Web design<em>xhtml+css div+css-webjx.com</em> <span>www.webjx.com</span></a ></li> <li><a href= "#" title= "CSS Web Design" >CSS Web design<em>xhtml+css div+css-webjx.co M</em> <span>www.webjx.com</span></a></li> </ul></div></body> </ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
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
