Question

我有一个div标签

<div class="owl-stage" style="transform: translate3d(-1636px, 0px, 0px); transition: 0.9s; width: 2570px; margin-left: 0px;">
....
</div>

并为此

悬停类

.owl-stage:hover {
    -webkit-transform: translate3d(-1280px, 0, 0) !important;
    transform: translate3d(-1280px, 0, 0) !important;
    transition: 450ms transform, 450ms -webkit-transform;
}

当单击按钮时，owl阶段变换translate3d值会自动更改（-1636px到-1108px或其他）。

我想在.owl-stage中减去-200px：从当前值悬停。（例如-1636 - 200px，因此值为-1836px，悬停代码将变为那样

.owl-stage:hover {
    -webkit-transform: translate3d(-1836px, 0, 0) !important;
    transform: translate3d(-1836px, 0, 0) !important;
    transition: 450ms transform, 450ms -webkit-transform;
}

问题是每次用户点击按钮，.owl-stage translate3d值都会改变。所以我不能在CSS文件中进行硬编码。我想在.owl-stage中自动为translate3d设置值：根据条件使用hover类而不使用Javascript或jQuery。可能吗？如果是的话，我该怎么办？

如何知道CSS中的当前元素变换translate3d值

0 个答案: