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 中实现这一点（演示：小提琴）

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 保持不变。这应该得到我相信你想要的结果。让我知道这是否适合您。