有没有办法使用CSS向后工作[重复]

Posted

技术标签:

【中文标题】有没有办法使用CSS向后工作[重复]【英文标题】:Is there a way to work backwards using CSS [duplicate] 【发布时间】:2013-04-15 19:51:34 【问题描述】:

我想知道是否有办法在 CSS 中反向工作。我的意思是说我在 div 标签周围有一个边框,然后在该 div 标签内是一个具有悬停功能的链接。有没有办法在该链接悬停时更改 div 标签上的边框颜色,或者这只能使用 jquery 实现?

【问题讨论】:

从技术上讲,如果您将鼠标悬停在链接上,您将悬停在 div 上... 但是,如果将鼠标悬停在 div 上,您并不总是将鼠标悬停在链接上。 是的,当我将鼠标悬停在它上面时,div 会改变颜色,然后里面是一个链接。我希望该 div 在链接悬停时更改颜色。 【参考方案1】:

你可以让整个 div 悬停:

.outer-class:hover 
  border-color: some-color;

outer-class 是 div 的类。

【讨论】:

【参考方案2】:

您的问题的答案是:不,没有这种方法。使用 jQuery 来实现这一点还是有点过头了,我不建议这样做。相反,重构您的标记并记住您可以访问伪类 (:hover) 不仅用于链接(我们支持 IE6 的日子已经结束,甚至 IE7 也支持 :hover 任意元素 iirc),所以您可以简单地这样做:

div:hover 
    border-color:green;

【讨论】:

【参考方案3】:

有点可能。这是一个例子:http://jsfiddle.net/hL3Ta/

<div>
    <a href="#">Some link</a>
</div>

..

div 
    display: inline-block;
    border:5px solid black;

div:hover 
    border: 5px solid red;


a 
    display: inline-block;
    width: 100px;
    height: 100px;

正如其他答案中提到的,块模型的性质目前不允许选择器反向操作。纯 CSS 解决方法是在将尺寸作为嵌套目标的容器上使用伪元素。

【讨论】:

【参考方案4】:

当下一个 CSS 选择器规范准备好并由浏览器实现时,这将成为可能。那么就可以这样写:

!div a:hover  border-color: red; 

目前的工作草案提案在这里:http://www.w3.org/TR/2012/WD-selectors4-20120823/#subject

【讨论】:

以上是关于有没有办法使用CSS向后工作[重复]的主要内容,如果未能解决你的问题,请参考以下文章

缩短重复元素和伪类组合的冗长 CSS

CSS重复背景图像但不重复线性渐变

有没有办法在重复转换之前添加“冷却”延迟或需要用户输入?

在现有使用广播接收器的应用程序之后,有没有办法让重复警报工作?

CSS父/祖先选择器[重复]

创建 CSS :after 使用 jQuery [重复]