search

Home  >  Article  >  Web Front-end  >  Display background color web page special effects CSS code

Display background color web page special effects CSS code

伊谢尔伦
伊谢尔伦Original
2017-06-16 10:54:282304browse

Mouse activation displays the background color. How should we write such code? Let's sort out our ideas: set the part in a as a block element, and then define the style after the mouse is placed. In CSS1:hover only works on the a element, in CSS2:hover applies to all elements. IE7 also does not support this standard in CSS2. Therefore, in order to adapt to all browsers, it still needs to be defined in a.

The code running effect:


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无序列表UL 鼠标激活显示背景色的实例</title>
<style type="text/css">
#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 {  /* make 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>
</head>
<body>
<div id="links">
<ul>
<li><a href="#" title="CSS Web Design">CSS Web Design<em>xhtml+css div+css - cnn6.net??</em> <span>cnn6.net??</span></a></li>
<li><a href="#" title="CSS Web Design">CSS Web Design<em>xhtml+css div+css - cnn6.net??</em> <span>cnn6.net??</span></a></li>
</ul>
</div>
</body>
</html>

The above is the detailed content of Display background color web page special effects CSS code. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Some good example codes for form effects on the websiteNext article：Some good example codes for form effects on the website

Related articles

See more