悬停时使边框淡入/淡出？ [英] Make border fade in/out on hover?

问题描述

有没有一个简单的方法来褪色CSS border-bottom 到我的图像上悬停，并说，边界不再徘徊时再次淡出？

 < div class =hover> 
< img src =images / ex.jpg/> 
< / div> 
  

解决方案

您不需要使用JQUERY / p>

在您的CSS样式表中，输入此条目。

  hover {
 border-bottom：5px solid rgba（0,0,0,0）; 
 
 transition：border-color 1s linear; 
 -moz-transition：border-color 1s linear; / * FF3.7 + * / 
 -o-transition：border-color 1s linear; / * Opera 10.5 * / 
 -webkit-transition：border-color 1s linear; / * Saf3.2 +，Chrome * / 
} 
 
 div.hover：hover {
 border-color：rgba（1,1,1,1） 
} 
  

点击这里---------->检查我的JSFIDDLE，看看它是如何工作。<---------- CLICK HERE

Is there an easy way to fade a CSS border-bottom onto my image on hover, and have said border fade out again when not hovered anymore?

<div class="hover">
<img src="images/ex.jpg"/>
</div> 

解决方案

You don't need to use JQUERY for this

In your CSS Style sheet, make this entry.

div.hover {
      border-bottom: 5px solid rgba(0,0,0,0);

      transition: border-color 1s linear;
      -moz-transition: border-color 1s linear;    /* FF3.7+ */
      -o-transition: border-color 1s linear;      /* Opera 10.5 */
      -webkit-transition: border-color 1s linear; /* Saf3.2+, Chrome */
    }

    div.hover:hover {
      border-color: rgba(1,1,1,1);
    }

CLICK HERE---------->Check my JSFIDDLE to see how it works.<----------CLICK HERE

这篇关于悬停时使边框淡入/淡出？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！