CSS:悬停过渡后
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/7306765/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS :after hover Transition
提问by Aamir Mahmood
The HTML structure
HTML 结构
<div id="small_gal">
<div><img src="images1.jpg" /></div>
<div><img src="images1.jpg" /></div>
<div><img src="images1.jpg" /></div>
<div><img src="images1.jpg" /></div>
<div><img src="images1.jpg" /></div>
<div><img src="images1.jpg" /></div>
<div><img src="images1.jpg" /></div>
<div><img src="images1.jpg" /></div>
</div>
The images are having dropshadows so border
is not a solution, as it will be outside the image
图像有阴影,所以border
不是解决方案,因为它会在图像之外
The border is having transition and it works smoothly on FF but not in chrome or other browsers
边框正在过渡,它在 FF 上运行流畅,但在 chrome 或其他浏览器中无法运行
Here is the code which I have used
这是我使用的代码
#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;
}
Note:
笔记:
#small_gal
is only the container each image is wrapped in a div so we can implement :after
只是每个图像都被包裹在一个 div 中的容器,所以我们可以实现 :after
回答by tw16
Firefox 4+ is the only browser that supports the transitioning of pseudo-elements such as :before
and :after
.
Firefox 4+ 是唯一支持伪元素(如:before
和 )转换的浏览器:after
。
Source: http://css-tricks.com/13555-transitions-and-animations-on-css-generated-content/
来源:http: //css-tricks.com/13555-transitions-and-animations-on-css-generated-content/
回答by Matthew
CSS transitions are still experimental in WebKit so it's likely you've hit some edge-case bug involving the ::after pseudo-selector. I suggest avoiding it altogether and just transitioning border-color
instead. This worked fine in Chrome and Safari:
CSS 转换在 WebKit 中仍处于实验阶段,因此您可能遇到了一些涉及 ::after 伪选择器的边缘情况错误。我建议完全避免它,而只是过渡border-color
。这在 Chrome 和 Safari 中运行良好:
#small_gal div.p {
border: 2px solid transparent;
-webkit-transition: border-color 1s ease-in;
}
#small_gal div.p:hover {
border-color: orange;
}
回答by Vincent Verbruggen
You can use CSS transitions on pseudo elements like :before and :after if you can define the property on the element itself and use inherit
in the pseudo element. So in your case instead of putting a transition on the opacity
, you could put a transition on the border-color
.
如果您可以在元素本身上定义属性并inherit
在伪元素中使用,则可以在伪元素上使用 CSS 过渡,例如 :before 和 :after 。因此,在您的情况下opacity
,您可以在border-color
.
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#small_gal div {
border-color: transparent;
cursor: pointer;
display: inline-block;
position: relative;
-webkit-transition: border-color 0.5s ease-in-out;
-moz-transition: border-color 0.5s ease-in-out;
-o-transition: border-color 0.5s ease-in-out;
-ms-transition: border-color 0.5s ease-in-out;
transition: border-color 0.5s ease-in-out;
}
#small_gal div:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-color: inherit;
border-style: solid;
border-width: 3px;
left: 0;
top: 0;
}
#small_gal div:hover {
border-color: #e27501;
}
#small_gal div img {
display: block;
height: auto;
max-width: 150px;
width: auto;
}
<div id="small_gal">
<div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div>
<div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div>
<div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div>
<div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div>
<div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div>
</div>