28
Dec

为所有HTML标签添加Hover效果

Raecoo on 2008-12-28,10:53  
Filed under: CSS, Javascripts  Tags:

在制作网页时经常会用到onmouseover和onmouseout效果来改善用户体验，最常见的就是在指定Element中添加如下的代码来实现背景色的切换。
onmouseover='this.style.background=#666;' onmouseout="this.style.background=#fff;"
其实到达这个效果有两种方式：Javascript和CSS，上面提到是用JS来完成的，我个人更喜欢用CSS来解决类似问题。
用CSS的hover来解决这个问题，不仅简单高效，关键是低侵入性，页面上不会写太多东西。例如在li上添加这个效果：
li {background:#fff;}
li:hover {background:#666;}
这样的代码看起来简洁且方便日后维护，但也有一个问题就是在IE6下并不是所有HTML标签都支持hover这个属性，还好已经有人为IE做了这个Pacth，只需要添加一下就好了。点击下载csshover

« custom exceptions in merb
vForm javascript表单验证工具类 »

No Comments

Be the first to comment on this entry.

Leave a comment

Name(required)
Mail (will not be published)(required)
Website

Fields in bold are required. Email addresses are never published or distributed.

Some HTML code is allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
URLs must be fully qualified (eg: http://www.raecoo.com),and all tags must be properly closed.

Line breaks and paragraphs are automatically converted.

Please keep comments relevant. Off-topic, offensive or inappropriate comments may be edited or removed.

    About

    Tag Cloud