悬停时的CSS转换

我遇到问题。当我将鼠标悬停在对象上时，我实际上试图在div上进行转换。所以基本上我有一个div，当我将鼠标悬停在div上时，它应该在其顶部显示另一个div，但它应该被转换，所以悬停效果会更平滑。悬停时的CSS转换

怎么可能，如果我有这两个div？

<div id="first"> 

    <div id="on-hover"> 

    <img src="example-image.png" /> 

    </div> 

</div>

来源

2013-03-31 user1406071

您使用CSS3过渡：

#on-hover { 
    opacity:0; 
    /* Firefox */ 
    -moz-transition-property: opacity; 
    -moz-transition-duration: 2s; 
    -moz-transition-delay: 1s; 
    /* WebKit */ 
    -webkit-transition-property: opacity; 
    -webkit-transition-duration: 2s; 
    -webkit-transition-delay: 1s; 
    /* Opera */ 
    -o-transition-property: opacity; 
    -o-transition-duration: 2s; 
    -o-transition-delay: 1s; 
    /* Standard */ 
    transition-property: opacity; 
    transition-duration: 2s; 
    transition-delay: 1s; 
} 
#on-hover:hover { 
    opacity:1; 
}

完整的东西的工作：http://jsfiddle.net/djwave28/CuNkZ/2/

更多信息可以在这里阅读：http://robertnyman.com/2010/04/27/using-css3-transitions-to-create-rich-effects/ 我确实需要明确地提到，这可能不适用于IE9及以下版本。 IE10似乎按照文档顶部工作。如果需要，您可以使用JavaScript模拟效果，但问题在于CSS。

来源

2013-03-31 16:53:07 Daniel

通过平滑你的意思是淡入？以下是#on-hover中淡化的示例。我使用pointer-events:none来忽略在<img>上的悬停并将活动传递给其父母#on-hover。

jsFiddle

#first, 
#on-hover { 
    width:100px; 
    height:100px; 
} 

#first { 
    background-color:#F00; 
} 

#on-hover { 
    opacity:0; 
    background-color:#0F0; 
    -webkit-transition:opacity .5s ease; 
    -moz-transition:opacity .5s ease; 
    transition:opacity .5s ease; 
} 

#on-hover:hover { 
    opacity:1; 
} 

#on-hover img { 
    pointer-events:none; 
}

来源

2013-03-31 16:49:22

'：hover'是分层的，所以除了定位元素之外，通常不需要忽略它。 – Neil

请注意，正如我写的，我更喜欢其他两个检查父级悬停状态的答案，因为这也适用于导致过渡元素移动的过渡属性。 – Neil

#on-hover { 
    opacity: 0; 
    transition: opacity 0.5s; 
    -webkit-transition: opacity 0.5s; 
} 
#first:hover #on-hover { 
    opacity: 1; 
}

这只是有关动画。这里有一个更详细的例子：http://jsfiddle.net/ELa6X/

来源

2013-03-31 16:51:21 Kaloyan

使用伪选择器:hover。

#first:hover > #on-hover{ 
    opacity:1; 
} 

#on-hover{ 
    opacity:0; 
    -webkit-transition: opacity 0.5s; 
} 

#first{ 
    width:300px; 
    height:200px; 
}

http://jsfiddle.net/charlescarver/V8PK3/1/

来源

2013-03-31 16:52:20 Charlie

我赶紧嘲笑起来的东西，可能与CSS3过渡demo jsfiddle

#on-hover { 
    transition: opacity .25s ease-in-out; 
    -moz-transition: opacity .25s ease-in-out; 
    -webkit-transition: opacity .25s ease-in-out; 
    opacity:0; 
}

来源

2013-03-31 16:53:38 Vector

-1

做，我会使用jQuery和animate()建议。你可以用CSS做，但是你会遇到旧版浏览器的问题。

来源

2013-03-31 16:53:40 hurrtz

悬停时的CSS转换

回答

相关问题