css - 如何在另一个元素悬停时为一个元素设置动画

Question

我有一个包含两个元素的 div 框。一个在另一个下面。因此，当下方元素悬停时，我会让它动画化并将其滑出顶部元素。

<div id="main">
        <div id="box"></div>
        <div id="item"></div>
</div>

根据我对 CSS3 的了解，我只能为元素进行过渡，使其在悬停时滑出。但我希望它发生在#main 悬停而不是#item 时。 请看看他们。 http://jsfiddle.net/sL3Pw/

Answer 1

你是对的，目前没有办法在纯 CSS 中为子元素的父元素设置样式。您可以使用 JavaScript 作为实现所需效果的一种方式。

(更新)

您可以通过执行以下操作在 JavaScript 中实现此目的(DEMO:Fiddle)

JS

这应该运行 onload 否则它不会工作。

// On Hover
document.getElementById('main').onmouseover = function () {
    document.getElementById('item').classList.add("to-left"); // Add To Left Class
}

// OnMouseOut (Not Hover)
document.getElementById('main').onmouseout = function () {
    document.getElementById('item').classList.remove("to-left"); // Remove To Left Class
}

请记得在需要时更改元素的 ID。

CSS

将此 CSS 类添加到您的 CSS

.to-left {
    margin-left: 60px;
}

并且您的 HTML 保持不变。这应该得到我认为您想要的结果。如果这对你有用，请告诉我。