html5hover鼠标悬停,不使用hover外部CSS样式实现hover鼠标悬停改变样式

不能使用外部CSS样式实现hover鼠标悬停改变样式

在DIV+CSS网页布局中，有时我们不能直接使用外部CSS样式控制DIV样式，比如对a设置a:hover样式。

可以使用onMouseOver(鼠标移到目标上)和onMouseOut(鼠标移开目标后)实现对a标签或其它html标签设置hover样式。

直接对标签使用即可，无论A标签、SPAN标签、DIV标签等均可。

jb51 以上对a超链接代码设置默认样式、鼠标移到目标上、鼠标移开目标后样式。特点代码比较长。

jb51.net重要提示说明：为了看到鼠标移开后与默认样式相同，通常需要直接对标签使用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案例展示代码：

XML/HTML Code复制内容到剪贴板

jb51.net实例

7..abc a{ color:#00F; text-decoration:none}

8./* 默认abc盒子里超链接文字字体颜色为蓝色没有下划线 */

10..abc a:hover{ color:#F00; text-decoration:underline}

11./* 鼠标悬停abc盒子里超链接文字上后字体颜色为红色出现下划线 */

12.

13..bb{ color:#00F}

14..bb:hover{ color:#F00; font-weight:bold}

15./* 直接对bb对象盒子设置hover */

16.

17.

18.

19.

20.欢迎访问jb51.net网站！

21.

22.

23.

24.默认我是蓝色，鼠标悬停时变红色并加粗。

25.

26.

27. 2、HTML代码与浏览器效果截图说明图

默认与鼠标悬停浏览器测试效果截图

3、外部CSS样式转换后HTML源代码

XML/HTML Code复制内容到剪贴板

jb51.net实例

9.欢迎访问

10.

11.style="color:#00F; text-decoration:none"

12.onMouseOver="this.style.color='#F00';this.style.textDecoration='underline'"

13.onMouseOut="this.style.color='#00F';this.style.textDecoration='none'">jb51.net

网站！

14.

15.

16.

17.onMouseOver="this.style.color='#F00';this.style.fontWeight='bold'"

18.onMouseOut="this.style.color='#00F';this.style.fontWeight='normal'">

19.默认我是蓝色，鼠标悬停时变红色并加粗。

20.

21.

22.

4、使用onMouseOver和onMouseOut实现外部CSS hover样式截图使用onMouseOver和onMouseOut实现外部CSS hover样式浏览器测试效果与说明截图

5、特别说明：无论是a标签还是div标签、span标签、h1标签、p标签等都可以直接在标签内使用onMouseOver和onMouseOut实现鼠标悬停移到对象上与移开后样式变化。需要注意是，一般为了初始默认状态与鼠标移开后样式保存一致，需要对标签内加style属性设置CSS与onMouseOut(鼠标移开)设置样式CSS保存一致。谢谢阅读，希望能帮到大家，请继续关注脚本之家，我们会努力分享更多优秀的文章。

html5hover鼠标悬停,不使用hover外部CSS样式实现hover鼠标悬停改变样式相关推荐

css鼠标移入线条延中心伸长,css动画效果：鼠标移上去底部线条从中间往两边延伸 - 子成君-分享出去，快乐加倍！-旧版已停更...
本站已不再更新,最新资源请前往zcjun.com获取! css: .top-nav a:after { content: ' '; position: absolute; z-index: 2; bo ...
Html字母变大的代码,css鼠标选中字体变大 div css鼠标悬停超链接的文字变大
css鼠标选中字体变大 css鼠标悬停超链接的文字变大 CSS布局鼠标悬停在超链接上字体变大,css实现鼠标经过锚文本文字时改变字体大小篇. 实现这一效果需要的是:hover伪类设置需要字体. 鼠标选 ...
鼠标的移入、移出事件与css中的hover伪类
开发工具与关键技术:html+css+js 作者: 李伙撰写时间: 2019年1月19日鼠标的移入.移出事件是一个模仿悬停事件(鼠标移入到一个对象上以及移出这个对象)的方法,当鼠标移动到一个匹配的 ...
html鼠标悬停直线变粗,鼠标悬停或经过对象时CSS样式变化设置
:hover伪类配置名目鼠标悬停颠末形态鼠标悬停或经由对象时CSS格局转变设置装备摆设,常见于对A超链接标签设置鼠标经由悬停时CSS名目. a:hover{ color:#F00; backgro ...
[css] 如何阻止:hover、:active等鼠标行为状态的触发？
[css] 如何阻止:hover.:active等鼠标行为状态的触发? css属性:pointer-events: none;应用避免重复提交---按钮点击后即增加该属性使其不链接不可跳转-- ...
html点击按钮换css文件夹,按钮如何使用外部css样式
按钮如何使用外部css样式 1.首先新建btn.css样式文件将默认的button样式去除/** * Reset button styles. * It takes a bit of work to ...
html桌面卡牌效果,html+css实现响应式卡片悬停效果
话不多,看效果先: 卡片悬停,响应式卡片,简约效果. 实现: 1. 定义标签,.kapian为最底层盒子,然后两个子盒子一个放图片,一个放文本: The aurora borealis natural ...
浏览器对css 伪类 hover的支持
今天在调试的时候,发现用hover写的样式在火狐上可以,在ie上却不行,百度了下,原来我用的是ie的Quirks模式. 这是在http://www.w3help.org网站上查到的结果. 问题描述 I ...
html css hover事件,css – 防止在父Div上触发Div的Hover事件？
根据定义,将鼠标悬停在孩子身上,也会悬停在父母身上. html事件中没有"阻塞". 有两个方法链,泡沫和捕获. Any event taking place in the W3C ...

html5hover鼠标悬停,不使用hover外部CSS样式实现hover鼠标悬停改变样式

html5hover鼠标悬停,不使用hover外部CSS样式实现hover鼠标悬停改变样式相关推荐

最新文章

热门文章