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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 01:31:22  来源:igfitidea点击:

CSS :after hover Transition

csshovercss-transitions

提问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 borderis not a solution, as it will be outside the image

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

enter image description hereenter image description here

在此处输入图片说明在此处输入图片说明

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 :beforeand :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-colorinstead. 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 inheritin 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>