争怎路由网:是一个主要分享无线路由器安装设置经验的网站,汇总WiFi常见问题的解决方法。

为什么有时候使用css中hover属性会没有反应?(示例)

时间:2024/3/23作者:未知来源:争怎路由网人气:

网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
当我们在使用css中hover时,偶尔会遇到无效的情况,这个真是让人很焦急。那么到底是什么原因导致失效的呢?本篇文章就给大家总结一下css中hover失效的原因。

css中hover的用法具体代码示例如下:

<style type="text/css">
	.one {
		margin: 0 auto;
		width: 400px;
		height: 300px;
		background: #ced05d;
	}
	.two {
		margin: 0 auto;
		width: 100px;
		height: 100px;
		background: #5a5aea;
	}
	.three {
		margin: 0 auto;
		width: 200px;
		height: 100px;
		background: #4b9c49;
	}
	.four {
		margin: 0 auto;
		width: 300px;
		height: 100px;
		background: #7b4141;
	}
	.one :hover {
		background: #da56d0;
	}
</style>
<body>
<h1>css中hover的用法测试</h1>
<div class="one">
	<div class="two">
	</div>
	<div class="three">	
	</div>
	<div class="four">	
	</div>
</div>
</body>

无效原因总结:

一、上述代码测试时发现鼠标经过class为one的时候背景不变,而经过one里面的其他div背景颜色发生变化,说明了:hover前加空格,本身不会有:hover的效果,而后代元素会有:hover的效果。

二、只有后代元素和兄弟元素(紧接在元素后的兄弟元素)才有效果,其他的:hover会失效

三、类名错误;

四、:hover 被置于 :link 和 :visited 之前也是无效的;

注:

:hover 选择器用于选择鼠标指针浮动在上面的元素。

提示::hover 选择器可用于所有元素,不只是链接。

提示::link 选择器设置指向未被访问页面的链接的样式,:visited 选择器用于设置指向已被访问的页面的链接,:active 选择器用于活动链接。在 CSS 定义中,:hover 必须位于 :link 和 :visited 之后(如果存在的话),这样样式才能生效。

以上就是为什么有时候使用css中hover属性会没有反应?(示例)的详细内容,更多请关注php中文网其它相关文章!


网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



关键词:为啥有时候运用css中hover属性会没有反应?(示例)




Copyright © 2012-2018 争怎路由网(http://www.zhengzen.com) .All Rights Reserved 网站地图 友情链接

免责声明:本站资源均来自互联网收集 如有侵犯到您利益的地方请及时联系管理删除,敬请见谅!

QQ:1006262270   邮箱:kfyvi376850063@126.com   手机版