或许用了这么久的伪类:hover，还有部分朋友还不完全了解hover的规则：引用:
在CSS1中此伪类仅可用于a对象。且对于无href属性（特性）的a对象，此伪类不发生作用。
在CSS2中此伪类可以应用于任何对象。 但目前IE5.5、IE6仅支持CSS1中的:hover，不过新出的IE7是支持CSS2中的:hover。
当我们用伪类:hover做某些特殊效果时，依据CSS2很好完成，但为了现在占据主流浏览器的IE6，我们又不得不做很多工作，比如给添加a元素等来模拟完成最终的效果。
或许这样讲太空洞，请看下面一个常见的触发显示的例子（仅选择IE6为例讲解）。
我们先用CSS2的写法来实现：
XHTML部分：复制内容到剪贴板代码:
<ul>
<li>鼠标移过来触发我吧！<a href="#" title="">哈哈，终于被你发现了！</a></li>
</ul>CSS部分：复制内容到剪贴板代码:
* {margin:0padding:0}
ul {list-style:nonemargin:100px}
li {height:100pxwidth:100pxbackground:#000font-size:12pxcolor:#fffposition:relative}
li a {display:none}
li:hover a{display:blocktext-decoration:nonewidth:100pxheight:100pxbackground:#c00position:absolutetop:50pxleft:50pxcolor:#fff} 演示效果：
<!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/htmlcharset=utf-8" />
<title>IE中伪类:hover的使用及BUG</title>
<style>
* {margin:0padding:0}
ul {list-style:nonemargin:100px}
li {height:100pxwidth:100pxbackground:#000font-size:12pxcolor:#fffposition:relative}
li a {display:none}
li:hover a{display:blocktext-decoration:nonewidth:100pxheight:100pxbackground:#c00position:absolutetop:50pxleft:50pxcolor:#fff}
</style>
</head>
<body>
<ul>
<li>鼠标移过来触发我吧！<a href="#" title="">哈哈，终于被你发现了！</a></li>
</ul>
</body>
</html>
大家可以测试发现在FF等对CSS2支持很好的浏览器中，可以显示我们所要达到的效果，但在IE6中却无法实现。
下面让我们换一种思维，所用CSS1的写法来看看，这个时候由于无法支持li元素:hover的使用，我们只好把所有文字包含到a中，对a使用:hover，并且将要显示隐藏的部分放到span元素中，首先我们对XHTML进行部分调整，调整如下：
XHTML部分：复制内容到剪贴板代码:
<ul>
<li><a href="#" title="">鼠标移过来触发我吧！<span>哈哈，终于被你发现</span></a></li>
</ul>CSS中我们将a的设置成块级元素，并使a的大小和宽度和li的相同，并设置a为相对位置，用a来模拟上例中的li；而用span来模拟上例中的a，设置span在默认情况下隐藏（display:none），当a被触发时（:hover），则span显示（display:block）
CSS部分：复制内容到剪贴板代码:
* {margin:0padding:0}
ul {list-style:nonemargin:100px}
li {height:100pxwidth:100pxbackground:#000font-size:12px}
li a {display:blockheight:100pxwidth:100pxposition:relativecolor:#ffftext-decoration:none}
li span {display:none}
li a:hover span {display:blockwidth:100pxheight:100pxbackground:#c00position:absolutetop:50pxleft:50pxcolor:#fff} 演示效果：
<!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/htmlcharset=utf-8" />
<title>IE中伪类:hover的使用及BUG</title>
<style>
* {margin:0padding:0}
ul {list-style:nonemargin:100px}
li {height:100pxwidth:100pxbackground:#000font-size:12px}
li a {display:blockheight:100pxwidth:100pxposition:relativecolor:#ffftext-decoration:none}
li span {display:none}
li a:hover span {display:blockwidth:100pxheight:100pxbackground:#c00position:absolutetop:50pxleft:50pxcolor:#fff}
</style>
</head>
<body>
<ul>
<li><a href="#" title="">鼠标移过来触发我吧！<span>哈哈，终于被你发现</span></a></li>
</ul>
</body>
</html>
可我们发现上例中的效果，在IE6中依然无法显示，难道我们的代码写错了，可检查来检查去一点错误也没有（不信你找个高高手问问，他们依然会回答你，这代码完全正确），难道是标准中的说明是错的？还是IE6浏览器连CSS1也不支持？很多疑问从四面八方跑来了……
那到底是什么问题呢？
不是标准说明的错，也不是IE浏览器不支持CSS1，而是IE浏览器自身解析的问题，是IE5.5和IE6中伪类:hover的BUG。
那又该如何解决这个问题呢？
这个BUG可以通过在链接的属性中增加某些特殊的CSS属性声明来消除。
下面我们对上面的第二个例子进行实验，究竟哪些属性可以帮我们来消除这些BUG。
对CSS代码我们增加：复制内容到剪贴板代码:
li a:hover {} 对其属性我们仅设定width:100px发现在IE6中依旧没有变化，我们尝试着更改width的value，比如使其width:99px，奇怪的事情发生了，在IE6中，隐藏的部分在触发的时候显示出来了。我们再对li a:hover的属性仅设定color来测试（初始值为#fff），更改color值，发现在IE6下却也不能触发显示，奇怪，奇怪，真奇怪……是不是依旧是一头雾水……没关系，继续往下实验，或许归类了我们就能发现规律了！
我们再用其他属性进行设置：width，positon，background，text-decoration，font-size，font-weight，font-family，border，float，display，font-style，margin，padding，text-align，overflow，text-transform，text-indent，z-index，vertical-align。
我们发现除了text-decoration，color，z-index不能触发显示（对于不能触发显示的部分，可以还有某些遗漏的属性，欢迎朋友补充）外，其他属性均可以做为消除伪类:hover BUG的特定属性。
说明：
1、对于dispaly不可以用本例来测试，可另外写个更简单的例子（去除ul/li，a和span中的position）。在实际应用中怿飞不建议改变display值来做为特定属性消除此BUG，而且在某些例子中此属性不一定能消除BUG。
2、对于做为特定属性的border和background中的颜色我们还可用全写和简写来改变，如#fff和#ffffff在消除BUG中解析为2个不同的值。
最终效果：
<!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/htmlcharset=utf-8" />
<title>IE中伪类:hover的使用及BUG</title>
<style>
* {margin:0padding:0}
ul {list-style:nonemargin:100px}
li {height:100pxwidth:100pxbackground:#000font-size:12px}
li a {display:blockheight:100pxwidth:100pxposition:relativecolor:#ffftext-decoration:none}
li a:hover {background:#ccc}
li span {display:none}
li a:hover span {display:blockwidth:100pxheight:100pxbackground:#c00position:absolutetop:50pxleft:50pxcolor:#fff}
</style>
</head>
<body>
<ul>
<li><a href="#" title="">鼠标移过来触发我吧！<span>哈哈，终于被你发现</span></a></li>
</ul>
</body>
</html>
通过定义CSS样式表，能让网页具有美观一致的界面，可以将网页制作得更加绚丽多彩。一个样式文件可以作用于多个页面，具有更好的易用性和扩展性，通过修改样式文件，能制作出内容相同，而外观不同的多姿多彩的页面。此外，使用样式表能有效地分离网页的内容与外观控制，从而便于美工与程序员之间的分工协作，发挥各自的优势。为什么需要CSS样式表主要是基于以下几点原因：
(1) HTML标签的外观样式比较单一。
大家在学习前面几章时，不知发现没有？前面几章网页中的文字的字体、颜色、大小、超链接、间距等样式都比较单一，为了弥补这个缺点，就需要使用CSS样式表来对HTML标签进行控制，从而实现更加丰富多彩的效果。
(2) 样式表的作用相当于华丽的衣服。
同样的内容，采用不同的CSS样式文件，可以看到不同的布局和效果。从美工的角度来看，可以更容易地调整页面外观，调整页面里某个部分的文字或者图片等，从而实现复杂多变的页面效果，因此样式表相当于一个页面甚至一个网站的华丽的衣服。如图1所示，就是内容相同，外观不同的两个页面。
(3) 样式表能实现内容与样式的分离，方便团队开发。
由于当今社会竞争日趋激烈，分工越来越细，每个人做的事越来越单一，我们开发一个网站也不例外，往往需要美工和程序设计人员的配合，美工做样式，程序员写内容，为了迎合这种需要，就出现了样式表。样式表能把内容结构和格式控制相分离，使网页可以仅由内容构成，而将所有的网页格式通过CSS样式表文件来控制，从而方便美工和程序员分工协作、各司其职、各尽其能，为开发出优秀的网站提供了有力的保障。
添加修改CSS代码如下 ：.logo-site,.logo-sites{position:relativefloat:leftmargin:18px 0 0 10pxwidth:220pxmax-height:50pxoverflow:hiddentransition-duration:.5s}
.logo-site img,.logo-sites img{width:220pxmax-height:50px}@media screen and (max-width:480px){
.logo-site,.logo-sites{width:140px}}@media screen and (min-width:900px){
.logo-site:before{content:""position:absoluteleft:-665pxtop:-460pxwidth:220pxheight:15pxbackground-color:rgba(255,255,255,.5)-webkit-transform:rotate(-45deg)-moz-transform:rotate(-45deg)-ms-transform:rotate(-45deg)-o-transform:rotate(-45deg)transform:rotate(-45deg)-webkit-animation:searchLights 1s ease-in 1s infinite-o-animation:searchLights 1s ease-in 1s infiniteanimation:searchLights 1s ease-in 1s infinite}}@-webkit-keyframes searchLights{0%{left:-100pxtop:0}to{left:120pxtop:100px}}@-o-keyframes searchLights{0%{left:-100pxtop:0}to{left:120pxtop:100px}}@-moz-keyframes searchLights{0%{left:-100pxtop:0}to{left:120pxtop:100px}}@keyframes searchLights{0%{left:-100pxtop:0}to{left:120pxtop:100px}}
.site-title{font-size:24pxfont-size:2.4remfont-weight:700padding:0 0 2px 0}
.site-name{display:none}@media screen and (min-width:900px){
.logo-site img,.logo-sites img{transition-duration:.8s}
操作流程
把css代码当中的logo-site改成你网站包围logo的css即可(f12键审核元素，即可找到你的logo的css元素)。找到你logo的css名称然后把上面的css代码修改成你的css名称，放入css代码当中即可(防止出错，记得备份!)
以上就是logo添加css扫光效果的方法，当然你也可以运用到其他的地方。
注意，有些模板CSS代码不相同，不能贸然的使用，可能会出现错误，新手不要尝试。
