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

Answer 2

您的HTML代码：

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

您的Jquery代码：

$(function(){
  $(".hover").hover(
      function(){
          $(this).css({'border-bottom':'1px solid #888', opacity: '0.8'}); 
      },
      function(){
          $(this).css('border-bottom', 'none'); 
      }
  );                             
});

Answer 3

CSS：

.hover {
    border-bottom:none;
    transition: border-bottom 1s;
    -webkit-transition: border-bottom 1s;
{

.hover:hover {
    border-bottom: 3px solid #888;
}

这将比Javascript方法更流利

Answer 4

 div.mosueover{
  border-bottom: 5px solid rgba(50,50,50,1);

  transition: /*all*/ border-color 1s ease-in-out;
  -moz-transition: /*all*/ border-color 1s ease-in-out;
  -o-transition: /*all*/ border-color 1s ease-in-out;
  -webkit-transition: /*all*/ border-color 1s ease-in-out;
}

div.mosueover:hover {
  border-color: rgba(50,50,50,0.5);
}

在悬停时让边框淡入/淡出？

4 个答案: