欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
> 不能使用外部样式实现鼠标悬停改变样式
在网页布局中，有时我们不能直接使用外部CSS样式控制DIV样式，比如对a设置样式。
可以使用onMouseOver（鼠标移到目标上）和onMouseOut（鼠标移开目标后）实现对a标签或其它设置hover样式。
直接对标签使用即可，无论、、等均可。
&href=&/&&style=&color:#00F;&text-decoration:none&&onMouseOver=&this.style.color='#F00';this.style.textDecoration='underline'&&onMouseOut=&this.style.color='#00F';this.style.textDecoration='none'&DIVCSS5&
以上对a超链接代码设置默认样式、鼠标移到目标上、鼠标移开目标后样式。特点代码比较长。
DIVCSS5重要提示说明：为了看到鼠标移开后与默认样式相同，通常需要直接对标签使用style设置默认CSS样式并且与onMouseOut设置CSS样式保持相同。以免初始状态对象样式与鼠标移开对象后样式的不同。
如上代码：
style=&color:#00F;&text-decoration:none&&&
onMouseOut=&this.style.color='#00F';this.style.textDecoration='none'&&
设置默认#00F与不显示。
通过常规hover与不用外部hover实现hover样式设置方法案例如下
1、完整常规外部CSS案例展示代码：
&!DOCTYPE&&&&&http-equiv=&Content-Type&&content=&text/&charset=utf-8&&&DIVCSS5实例&&.abc&a{&color:#00F;&text-decoration:none}&/*&默认abc盒子里超链接文字字体颜色为蓝色&没有下划线&*/&&.abc&a:hover{&color:#F00;&text-decoration:underline}&/*&鼠标悬停abc盒子里超链接文字上后字体颜色为红色&出现下划线&*/&&.bb{&color:#00F}&.bb:hover{&color:#F00;&font-weight:bold}&/*&直接对bb对象盒子设置hover&*/&&&&&class=&abc&&欢迎访问&href=&/&DIVCSS5网站！&&&&class=&bb&&默认我是蓝色，鼠标悬停时变红色并加粗。&&&&
2、与浏览器效果截图说明图
默认与鼠标悬停浏览器测试效果截图
3、外部CSS样式转换后
&!DOCTYPE&html&&&&http-equiv=&Content-Type&&content=&text/&charset=utf-8&&&DIVCSS5实例&&&&class=&abc&&欢迎访问&&href=&/&&&style=&color:#00F;&text-decoration:none&&&onMouseOver=&this.style.color='#F00';this.style.textDecoration='underline'&&&onMouseOut=&this.style.color='#00F';this.style.textDecoration='none'&DIVCSS5网站！&&&&style=&color:#00F;&font-weight:normal&&onMouseOver=&this.style.color='#F00';this.style.fontWeight='bold'&&onMouseOut=&this.style.color='#00F';this.style.fontWeight='normal'&&默认我是蓝色，鼠标悬停时变红色并加粗。&&&&
4、使用onMouseOver和onMouseOut实现外部CSS hover样式截图
使用onMouseOver和onMouseOut实现外部CSS hover样式浏览器测试效果与说明截图
5、在线演示：（使用onMouseOver和onMouseOut转换后实例）
6、打包下载（包括了外部CSS与转换后）
7、特别说明：无论是a标签还是div标签、span标签、、等都可以直接在标签内使用onMouseOver和onMouseOut实现鼠标悬停移到对象上与移开后样式变化。需要注意是，一般为了初始默认状态与鼠标移开后样式保存一致，需要对标签内加设置CSS与onMouseOut（鼠标移开）设置样式CSS保存一致。
扩展阅读：
1、如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • ()• • ()• ()• • • • • • • • • • • • • • • • 必备HTML基础教程 Essential HTML Tutorials •
• () • () • () •
• () •
• () •
• 如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 08:35
原创：本文 DIVCSS5版权所有。最新文章NEWS• • • • • • • • • • CSS EFFECTS相关文章RELATED• • • • • • • • • • 热点文章HOT
学习与资源分享平台后使用快捷导航没有帐号？
只需一步，快速开始
查看: 6847|回复: 6
能否实现给TD加个HOVER鼠标经过的效果呢用CSS no JS
UID51370在线时间 小时积分11589帖子离线17341 天注册时间
能否实现呢。如果不用A标签
UID237272在线时间 小时积分14730帖子离线17341 天注册时间
A 都不给用啊~ 那IE不支持了
UID113524在线时间 小时积分38525帖子离线17341 天注册时间
&HOVER鼠标经过的效果&是对链接文字属性的改变，只能用A标签（A伪类）来实现，而与TD无关；
TD加个鼠标经过的效果是对TD背景色属性的改变，只能用onmouseover,onmouseout来实现，而与A标签（A伪类HOVER）无关.
UID51370在线时间 小时积分11589帖子离线17341 天注册时间
楼上正解，我同时收缩了下论坛。
的hover效果。我仿照来无反映呢。
象#container #title a:hover {
针对DIV就能有效果
UID113524在线时间 小时积分38525帖子离线17341 天注册时间
楼上引述的
/viewthread.php?tid=2510970
仿淘宝网站的导航标签效果
并不是简单的hover效果,整体上它是做了一个仿windows选项卡(tabspan)功能,
用ul+li+div+css做了它的导航菜单标签,运用了js,onclick改变标签的背景图片,同时改变选项内容.
如果你只想改变链接文字的属性,那就
如果你想改变容器或块元素的背景色属性,那就onmouseover,onmouseout.
UID36105在线时间 小时积分429帖子离线17341 天注册时间
中级会员, 积分 429, 距离下一级还需 71 积分
可以，只不过ie不行，看下面的代码
table.ruler tr:hover td{
background:
}
复制代码
UID36105在线时间 小时积分429帖子离线17341 天注册时间
中级会员, 积分 429, 距离下一级还需 71 积分
可以，只不过ie不行，看下面的代码
table.ruler tr:hover td{
background:
}
复制代码
Powered byjquery鼠标hover事件文字内容滑动遮罩效果
作者/代码整理：&&(转载请附加本文地址，带有“懒人原生”字样的谢绝转载) 发布日期：
效果描述：
其实今天发的这个，之前已经有过先例了
这里就不多说了
使用方法：
1、将head中的样式引入到你的网页中
2、将body里的代码部分拷贝到你需要的地方即可
(注意保持图片路径正确)
猜你喜欢...网页设计教程与开发
提供各种常见网页效果
提供各种各样的设计教程
装扮QQ，让QQ变得更酷
设计参考，提高自升水平
学习服务器和操作系统
提供各种素材和工具
收藏学习资料
您现在的位置：&&>>&&>>&&>>&&>>&正文
JQuery入门――事件切换之hover()方法应用介绍
1、在JQuery中，有两个方法用于事件的切换，一个方法是hover()，另一个是toggle()。所谓切换事件，即有两个以上的事件绑定于一个元素，在元素的行为动作间进行切换。如一个超级链接标记&a&若想实现当鼠标悬停时触发一个事件，鼠标移出时又触发一个事件，可以用切换事件轻松实现。
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/ charset=utf-8" /& &title&切换事件hover&/title& &script type="text/javascript" src="jquery-1.8.3.min.js"&&/script& &script type="text/javascript"& $(function(){ $(".clsTitle").hover(function(){ $(".clsContent").show(); }, function(){ $(".clsContent").hide(); }) }) &/script& &/head& &body& &div class="clsTitle"&JQuery简介&/div& &div class="clsContent"&JQuery是由美国人John Resig于2006年创建的一个开源项目，它的主旨是：以更少的代码，实现更多的功能&/div& &/body& &/html& 3、效果图预览：
当鼠标移动到JQuery简介时：
转载请注明:破洛洛(谢谢合作)
上一篇文章： 下一篇文章：
网友评论：
[][][][][][][][][][]一个简单的JS鼠标悬停特效具体方法
字体：[ ] 类型：转载 时间：
这个特效最终实现效果就是当鼠标移动到链接上，文字会横向移动一定距离，貌似总有人喜欢这些花花草草。添加此效果方法很简单。
首先，需加载jquery库（略过）。其次，将下面 Javascript代码加到页面的头部：& 代码如下:&script type='text/javascript'&&&& jQuery(document).ready(function($){&&& $('a').hover(function()&&& {&&& $(this).stop().animate({'left': '5px'}, 'fast');&&& }, function() {&&& $(this).stop().animate({'left': '0px'}, 'fast');&&& });&&& });&&& &/script&&& &第三，在样式中加入：& 代码如下:a {position:relative}&&
完成。简单定义下a:hover样式，貌似更简单：& 代码如下:a:hover {&& padding: 0 0 0 8}&& &只是不够自然而已。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具}