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作为实现所需效果的方法。

（UPDATE）

您可以通过执行以下操作（DEMO：Fiddle）

在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保持不变。这应该得到我认为你想要的结果。如果这对您有用，请告诉我。

如何在另一个项目悬停时为一个项目设置动画

1 个答案:

（UPDATE）

JS

CSS