jquery - 使边框在悬停时淡入/淡出？

Question

有没有一种简单的方法可以在鼠标悬停时将 CSS border-bottom 淡入到我的图像上，并且当不再悬停时边框会再次淡出？

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

Answer 1

你不需要为此使用 JQUERY

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

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