Question

这可能只适用于JavaScript，但我想知道是否可以使用以下事件将一种风格链接到另一种风格：焦点或：仅在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; }
}

那么我在其他风格之间进行交流的语法是什么，或者甚至是可能的呢？

Answer 1

如果你的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

Answer 2

我不相信这是可能的。您可以查看http://sass-lang.com/，它可以让您做出类似的事情。

Answer 3

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

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

如果这不是您想要的，我建议您进行设置，以便在关注.hitArea时，javascript将类应用于具有您要应用的样式的.changeArea。

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

3 个答案: