使用css在两个其他元素上悬停时对元素进行动画 [英] Animating an element when hovering on two other element using css

问题描述

我试图动画一个div，当悬停在另一个div。 Ihave以下代码

i am trying to animate a div when hovering on another div. Ihave following code

html

<div>
</div>
<div class="content">
</div>

css

div {
    height: 100px;
    width: 100px;
    background: red; 
        transition: all 0.4s ease-in-out;
}
.content {
    height: 20px;
    width: 20px;
    background: green;
    display: none;

}
div:hover + .content{
    display: block;
    margin-top: -100px;
    margin-left: 50px;
}

我想要做的是，我需要动画。 -top：-100px and margin-left：50px;从默认位置，当用户悬停在这些元素之一。但是atm与此代码，它只有当用户悬停在.content和它动画的另一种方式。 （从margin-top：-100px和margin-left：50px;到默认位置）。请原谅我的英语

What i am trying to do is, i need to animate .content to margin-top: -100px and margin-left: 50px; from its default position, when the user is hover on one of these elements. But atm with this code it only works when the user hover on the .content and it animate the other way. (from margin-top: -100px and margin-left: 50px; to default position). Please excuse my english

jsfiddle-> http：// jsfiddle.net/fTAUk/1/

jsfiddle-> http://jsfiddle.net/fTAUk/1/

推荐答案

尝试这样做： http://jsfiddle.net/derekstory/fTAUk/4/

您需要将内容封装在div中并使用子选择器。注意我给了较大的div一个id。这里是css：

You need to wrap the content in the div and use a child selector. Note I gave the larger div an id as well. Here is the css:

#box {
    height: 100px;
    width: 100px;
    background: red;
    position: absolute;
    transition: all 0.4s ease-in-out;
}
#content {
    width: 20px;
    background: green;
    height: 0;
    transition: all 0.4s ease-in-out;
    position: margin-top: -100px;
    margin-left: 50px;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease;
}
#box:hover > #content {
    height: 20px;
}

这篇关于使用css在两个其他元素上悬停时对元素进行动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！