CSS:悬停后过渡-前端问题

CSS :after hover Transition(CSS:悬停后过渡)

本文介绍了CSS:悬停后过渡的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

HTML 结构

<div id="small_gal">
    <div><img src="aW1hZ2VzMS5qcGc=" /></div>
    <div><img src="aW1hZ2VzMS5qcGc=" /></div>
    <div><img src="aW1hZ2VzMS5qcGc=" /></div>
    <div><img src="aW1hZ2VzMS5qcGc=" /></div>
    <div><img src="aW1hZ2VzMS5qcGc=" /></div>
    <div><img src="aW1hZ2VzMS5qcGc=" /></div>
    <div><img src="aW1hZ2VzMS5qcGc=" /></div>
    <div><img src="aW1hZ2VzMS5qcGc=" /></div>
</div>

图像有阴影，所以 border 不是解决方案，因为它会在图像之外

The images are having dropshadows so border is not a solution, as it will be outside the image

边框有过渡，在 FF 上可以流畅运行，但在 chrome 或其他浏览器中不行

The border is having transition and it works smoothly on FF but not in chrome or other browsers

这是我使用的代码

#small_gal div:hover{cursor: pointer;}
#small_gal div:after {
    content: '';
    position: absolute;
    width: 112px;
    height: 81px;
    border: 3px solid #e27501;
    left: 9px; top: 9px;
    z-index: 9;

    opacity: 0;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}
#small_gal div:hover:after {
    opacity: 1;
}

注意:

#small_gal

只是容器每个图像都包含在一个 div 中，因此我们可以实现 :after

is only the container each image is wrapped in a div so we can implement :after

推荐答案

Firefox 4+ 是唯一支持 :before 和 :after<等伪元素过渡的浏览器/代码>.


Firefox 4+ is the only browser that supports the transitioning of pseudo-elements such as :before and :after.
来源:http://css-tricks.com/13555-transitions-and-animations-on-css-generated-content/

                        这篇关于CSS:悬停后过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！