使邊框在懸停時淡入/淡出？

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); 
}