jQuery img opacity/layer hover？

我有一個img鏈接，當你將鼠標懸停在它上面時，會彈出一個彩色/不透明層。它工作得很好，除了我需要圖像的名稱也漸漸消失。jQuery img opacity/layer hover？

所以圖像從它自己開始，但是當您將鼠標懸停在不透明度上時，會出現顏色以及圖像的名稱。

得到了一切，除名稱位排序，卡住了。

這裏是我迄今爲止jsfiddle ...

$(document).ready(function(){ 
    $('ul.case-thumbs li').hover(function(){ 
     $('img', this).stop().animate({opacity: 0.6}); 
    }, function() { 
     $('img', this).stop().animate({opacity: 1}); 
    }); 
    });

來源

2013-04-22 user4630

LIVE DEMO

$(function() { 
    $('ul.case-thumbs li').on("mouseenter mouseleave",function (e) { 
     var mEnt = e.type=="mouseenter"; 
     $('img', this).stop().fadeTo(300, mEnt?0.6:1); 
     $('.thumbName', this).stop().fadeTo(300, mEnt?1:0); 
    }); 
});

HTML：

<ul class="case-thumbs clearfix"> 
    <li> 
     <div class="hover"> 
      <a href="#"> 
       <span class="thumbName">ImageName</span> 
       <img src="http://lorempixel.com/output/food-q-c-1123-900-1.jpg" alt="test" /> 
      </a> 
     </div> 
    </li> 
</ul>

CSS：

span.thumbName{ 
    position:absolute; 
    z-index:2; 
    display:none; 
} 
ul.case-thumbs li { 
    height: 165px; 
    width: 220px; 
    margin-right: 20px; 
    margin-bottom: 20px; 
    float: left; 
    list-style:none; 
} 
ul.case-thumbs li img { 
    vertical-align:middle; 
    height: 165px; 
    width: 220px 
} 
ul.case-thumbs li .hover { 
    background-color: #560963; 
}

來源

2013-04-22 12:58:52

非常感謝大家的幫助。 – user4630 2013-04-22 13:05:10

@ user4630哦，不客氣！：）謝謝 – 2013-04-22 13:05:48

不知道，如果我得到你或沒有，但假設這是你想要的... 你只是改變<img>透明度這裏......既然映像名稱是img元素外......整個改變<a>元素的透明度應該工作..由於IMG和圖像的名字是一個錨標記內<a>

試試這個

$(document).ready(function() { 
$('ul.case-thumbs li').hover(function() { 
    $('a', this).stop().animate({ 
     opacity: 0.6 
    }); 
}, function() { 
    $('a', this).stop().animate({ 
     opacity: 1 
    }); 
}); 
});

fiddle here

來源

2013-04-22 12:46:24 bipen

我不希望能夠看到圖像/層的名字，直到你在它懸停。那麼我需要把它放在一個跨度和0不透明度？ – user4630 2013-04-22 12:52:40

這是你想要的http://jsfiddle.net/bipen/jasmE/3/ – bipen 2013-04-22 12:56:01

看到這個：http://jsfiddle.net/hD7JK/

$(document).ready(function() { 
$('ul.case-thumbs li').hover(function() { 
    $('img', this).stop().animate({ 
     opacity: 0.6 
    }); 
    $('span', this).stop().animate({ 
     opacity: 1 
    }); 
}, function() { 
    $('img', this).stop().animate({ 
     opacity: 1 
    }); 
    $('span', this).stop().animate({ 
     opacity: 0 
    }); 
}); 
});

HTML：

<ul class="case-thumbs clearfix"> 
    <li> 
    <div class="hover"> <a href="#"> 
     <span>Image Name</span> 
     <img src="http://lorempixel.com/output/food-q-c-1123-900-1.jpg" alt="test" /></a> 
    </div> 
    </li> 
</ul>

來源

2013-04-22 12:59:24 Anujith

jQuery img opacity/layer hover？

回答

相關問題