0

可能只有 JavaScript 才有可能，但我想知道是否可以仅在 CSS 中使用 :focus 或 :hover 之类的事件将一种样式链接到另一种样式。

例如，类“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; }
}

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

4

3 回答 3

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

于 2013-04-04T20:04:04.257 回答
0

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

于 2013-04-04T20:02:18.623 回答
0

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

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

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

于 2013-04-04T20:04:45.420 回答