本文介绍了CSS :: child 设置为在父悬停时更改颜色，但在悬停时也会更改的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！
问题描述
I have an <a> with a <span> children. I have written some CSS which changes the border-color of the children when the parent is hovered, but it also changes the border-color when I hover the children, which it shouldn't.
a {
padding: 50px;
border: 1px solid black;
}
a span {
position: absolute;
top: 200px;
padding: 30px;
border: 10px solid green;
}
a:hover span {
border: 10px solid red;
}
<a>
Parent text
<span>Child text</span>
</a>
解决方案
Update
The below made sense for 2013. However, now, I would use the :not() selector as described below.
CSS can be overwritten.
DEMO: http://jsfiddle.net/persianturtle/J4SUb/
Use this:
.parent {
padding: 50px;
border: 1px solid black;
}
.parent span {
position: absolute;
top: 200px;
padding: 30px;
border: 10px solid green;
}
.parent:hover span {
border: 10px solid red;
}
.parent span:hover {
border: 10px solid green;
}
<a class="parent">
Parent text
<span>Child text</span>
</a>
这篇关于CSS :: child 设置为在父悬停时更改颜色，但在悬停时也会更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！
The End
大气响应式网络建站服务公司织梦模板
高端大气html5设计公司网站源码
织梦dede网页模板下载素材销售下载站平台（带会员中心带筛选）
财税代理公司注册代理记账网站织梦模板（带手机端）
成人高考自考在职研究生教育机构网站源码(带手机端)
高端HTML5响应式企业集团通用类网站织梦模板(自适应手机端)