使用CSS定位除自身以外的样式

它可能只能用于JavaScript，但我想知道是否可以通过以下事件将某个样式链接到另一个样式：focus或：仅在CSS中悬停。使用CSS定位除自身以外的样式

例如，类“hitArea”在焦点时是否可以更改“changeArea”背景属性？

.changeArea { background: yellow; } 
.hitArea div:focus { changeArea:changeBG; } 
.changeArea changeBG { background: blue; }

我知道这个工作的例子做CSS动画的时候，好像有风格之间的通信：

.reveal { 
    position:absolute; 
    top:190px; 
    left:0px; 
    margin-left:0px; 

    -webkit-animation-name:reveal; 
    -webkit-animation-duration:0.1s; 
    -webkit-animation-fill-mode:backwards; 
    -webkit-animation-delay:0.2s; 

    animation-name:reveal; 
    animation-duration:0.1s; 
    animation-fill-mode:backwards; 
    animation-delay:0.2s; 
} 

@-webkit-keyframes reveal { 
    0% { left:-900px; -webkit-animation-timing-function:linear; } 
    99%  { left:-900px; -webkit-animation-timing-function:linear; } 
    100% { left:0px; } 
}

那么什么是语法，或者是它甚至有可能，对我来说，彼此之间沟通风格？

来源

2013-04-04 ベンノスケ

你的HTML看起来像什么？ – Bart 2013-04-04 20:00:23

如果你想要一个效果，添加一个类不会改变一个类。 – Vector 2013-04-04 20:01:58

在CSS3中，元素A的'：hover'或'：focus'只能用于更改元素B上的样式，如果B是A的后代，或者B是出现在A之后的A的同胞。 – 2013-04-04 20:04:24

如果你的HTML看起来像这样：

<div class="hitarea"> 
    <div class="changeArea"></div> 
</div>

然后当hitArea集中这样你可以针对changeArea：

.hitarea:focus .changeArea { 
    background-color: red; 
}

这只会当 “changeArea” 是hitarea的一些儿童工作。

了解更多关于CSS选择器，你可以与他们在这里做什么：https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Selectors

来源

2013-04-04 20:04:04 Bart

我不相信这是可能的。你可以看看http://sass-lang.com/，它可以让你做这样的事情。

来源

2013-04-04 20:02:18 jacksonfiverniner

SASS只是可以用CSS来完成可能的事情。 – 2013-04-04 20:06:34

如果.changeArea是.hitArea一个孩子，是的！

.hitArea:focus .changeArea{ /* Styles to apply when .hitarea is hovered */ }

如果这不是你想要的，我建议这样当.hitArea的重点是，JavaScript的应用一类.changeArea有您想要应用的样式设置它。

来源

2013-04-04 20:04:45

使用CSS定位除自身以外的样式

回答

相关问题