jquery懸停更改圖像和顯示框

Question

我有一堆圖像排隊，我想懸停顯示不同的圖像，並添加一個框。我在堆棧中發現了一篇文章，幫助我完成了第一部分，但我不確定如何實現顯示該部分的方法。我在想，我必須做一些如何將懸停在0到100之間的不透明度設爲動畫效果，然後重新懸停，但我不知道如何實現這一點。有任何想法嗎？

我迄今爲止代碼：

HTML

<article class="homeFeatured"> 
    <section> 
     <a href="<?php echo site_url($perm->category . '/' . $perm->perm_name) ?>"> 
      <img src="<?php echo base_url('public/img/products/' . $perm->perm_name ?>" alt="" /> 
      <span>View Item</span> 
     </a>  
    </section> 
    <section> 
     <a href="<?php echo site_url($perm->category . '/' . $perm->perm_name) ?>"> 
      <img src="<?php echo base_url('public/img/products/' . $perm->perm_name ?>" alt="" /> 
      <span>View Item</span> 
     </a>  
    </section> 
    <section> 
     <a href="<?php echo site_url($perm->category . '/' . $perm->perm_name) ?>"> 
      <img src="<?php echo base_url('public/img/products/' . $perm->perm_name ?>" alt="" /> 
      <span>View Item</span> 
     </a>  
    </section> 
</article​​​​​​​​>​ 

CSS：

.homeFeatured section{ 
    position: relative; 
    float: left; 
    display: block; 
    height: 303px; 
    width: 230px; 
    margin-left: 10px; 
} 

.homeFeatured span { 
    position: absolute; 
    top: 50%; 
    left: 50px; 
    width: 100px; 
    background: #8cc63f; 
    border: 1px solid #638d2b; 
    line-height: 30px; 
    text-align: center; 
    display: none; 
} 

的Jquery：

$(".homeFeatured img") 
      .mouseover(function() { 
       var src = $(this).attr("src").match(/[^\.]+/) + "Hover.jpg"; 
       $(this).attr("src", src); 
      }) 
      .mouseout(function() { 
       var src = $(this).attr("src").replace("Hover", ""); 
       $(this).attr("src", src); 
});​ 

Answer 1

更新：

• Working fiddle
• Working fiddle, CSS3 only

---

假設你希望顯示懸停<span>，有兩種選擇：

取決於你需要覆蓋瀏覽器，將jQuery用於動畫可能有點矯枉過正。

如果你可以用IE <住10不是動畫的過渡，CSS解決方案會做。

純CSS：

.homeFeatured span { 
    /* ... the stuff you have already */ 
    display: block; 
    opacity: 0; 
    -moz-opacity: 0; 
    -webkit-opacity: 0; 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    transition: 0.5s; 
    -moz-transition: 0.5s; 
    -webkit-transition: 0.5s; 
    -ms-transition: 0.5s; 
} 

.homeFeatured section a:hover span { 
    opacity: 1; 
    -moz-opacity: 1; 
    -webkit-opacity: 1; 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    filter: alpha(opacity=100); 
    transition: 0.5s; 
    -moz-transition: 0.5s; 
    -webkit-transition: 0.5s; 
    -ms-transition: 0.5s; 
} 

記住的是，IE專有filter性能會取消你的CSS。

的jQuery：

$(".homeFeatured img") 
     .mouseover(function() { 
      var src = $(this).attr("src").match(/[^\.]+/) + "Hover.jpg"; 
      $(this).attr("src", src); 
      $('+ span', this).animate({opacity : 1}); 
     }) 
     .mouseout(function() { 
      var src = $(this).attr("src").replace("Hover", ""); 
      $(this).attr("src", src); 
      $('+ span', this).animate({opacity : 0}); 
});​