CSS :: child 设置为在父悬停时更改颜色，但在悬停时也会更改

时间：2023-11-01

本文介绍了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 设置为在父悬停时更改颜色，但在悬停时也会更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！

上一篇：Jquery停止淡入/淡出 下一篇：您可以在 Firebug 中设置悬停状态“粘性"吗?

layer.open打开的页面关闭时，父页面刷新的方法layer.open打开的页面关闭时，父页面刷新的方法，在layer.open中添加： end: function(){ window.parent.location.reload();//关闭open打开的页面时，刷新父页面 }

CSS :: child 设置为在父悬停时更改颜色，但在悬停时也会更改

问题描述

Update

相关文章