在鼠標懸停時，更改圖像的不透明度並覆蓋文字

我想將不透明度和疊加文字放在縮略圖上時，將鼠標懸停在縮略圖上。我有幾個關於如何做的想法，但我相當肯定他們是低效率和笨拙的。在鼠標懸停時，更改圖像的不透明度並覆蓋文字

在Photoshop中使用文本覆蓋和減少不透明度來製作複製圖像。在鼠標懸停上將原件交換出來。
使用CSS刪除mouseover上的不透明度。使用Javascript來切換包含覆蓋文本的div的可見性。

我看到1的問題是它似乎是一個不必要的空間和帶寬使用，並會導致加載時間緩慢。用2，似乎我必須在每個div的位置進行硬編碼，這對維護和更新來說是一個痛苦。我知道這是一個有些普遍的問題，但我對如何解決這個問題不知所措。我怎樣才能以簡單的方式完成這個相對簡單的任務，以便輕鬆添加新的縮略圖？

來源

2011-06-16 kshen

喜歡這個？ http://stackoverflow.com/questions/6096321/fading-image-transparency-on-internet-explorer – mplungjan 2011-06-16 20:03:21

總結你的形象在<div class="thumb">
添加position: relative到.thumb。
在.thumb的內部添加<div class="text>。
將display: none; position: absolute; bottom: 0加到.text。
使用.thumb:hover .text { display: block }可以在懸停時顯示文字。

像這樣：http://jsfiddle.net/dYxYs/

你可以用一些JavaScript/jQuery的加強這方面的：http://jsfiddle.net/dYxYs/1/

$('.text').hide().removeClass('text').addClass('text-js'); 

$('.thumb').hover(function(){ 
    $(this).find('.text-js').fadeToggle(); 
});

這樣，基本效果還是工作沒有JavaScript和JavaScript的用戶得到的吸引力淡化效果。

來源

2011-06-16 20:01:47 thirtydot

是的，這就是我的意思:)投票了！ – giorgio 2011-06-16 20:07:02

這會在IE6中出現問題，因爲它不會識別'div'上的'：hover'動作，以防您計劃支持舊版瀏覽器。有幾種方法可以獲得不同程度的成功。 – daybreaker 2011-06-16 20:08:55

@daybreaker：你說得對。如果你必須*支持IE6，最好的解決方法是[無論：懸停]（http://peterned.home.xs4all.nl/csshover.html）。 – thirtydot 2011-06-16 20:11:32

2是一個很好的解決方案，已經做了大致相同的事情，並沒有你想要的那麼難。

確實使用css減少不透明度，而不是放置相對於img的div，並在其上方。它可以用普通的css來完成。 z-index是個訣竅。該div可以用$（'＃div'）顯示。slideUp（）ie。

來源

2011-06-16 20:00:56 giorgio

把它包裝的元素，做這樣的事情：

var t; 
$('div.imgwrap img').hover(function(){ 
    t = $('<div />').text($(this).attr('title')).appendTo($(this).parent()); 
    $(this).fadeTo('fast',0.5); 
},function(){ 
    $(this).fadeTo('fast',1); 
    $(t).remove(); 
});

有類似的標記：

<div class="imgwrap"> 
    <img src="http://www.gravatar.com/avatar/3d561d41394ff0d5d0715b2695c3dcf0?s=128&d=identicon&r=PG" title="text" /> 
</div>

例如：http://jsfiddle.net/niklasvh/Wtr9W/

來源

2011-06-16 20:03:50 Niklas

下面是一個例子。您可以根據需要定位文本，但是可以使用下面的基本原則。

http://jsfiddle.net/Xrvha/

#container { position: relative; } 

#container img, #container div { 
    position: absolute; 
    width: 128px; 
    height: 128px; 
} 

#container img { z-index -1; } 
#container div { 
    z-index 1; 
    line-height: 128px; 
    opacity: 0; 
    text-align: center; 
} 

#container:hover img { 
    opacity: 0.35; 
} 
#container:hover div { 
    opacity: 1; 
}

來源

2011-06-16 20:04:49 Robert

去與選項2，有辦法做到這一點不都寫爲每個圖像一個jQuery功能。正如我在jsfiddle中看到的那樣。

http://jsfiddle.net/daybreaker/dfJHZ/

HTML

<img src="http://placekitten.com/300/300" /> 
<span class="text" style="display:none">THIS IS A KITTEN</span> 
<br><br> 
<img src="http://placekitten.com/200/200" /> 
<span class="text" style="display:none">THIS IS A KITTEN</span>

jQuery的

$('img').mouseover(function(){ 
    $(this).css('opacity','.2'); 
    $(this).next('span.text').show(); 
}).mouseout(function(){ 
    $(this).css('opacity','1'); 
    $(this).next('span.text').hide(); 
});

你會需要修改span.text CSS來覆蓋其上的圖像的頂部，但是這不應該是太糟糕了。

來源

2011-06-16 20:05:19 daybreaker

如果你不想改變你的HTML包裝的東西等，我建議你this way。這裏是jQuery：

$(function() { 
    $(".thumb").mouseenter(function() { 
     var $t = $(this); 
     var $d = $("<div>"); 
     $d.addClass("desc").text($t.attr("alt")).css({ 
      width: $t.width(), 
      height: $t.height() - 20, 
      top: $t.position().top 
     }); 
     $t.after($d).fadeTo("fast", 0.3); 
     $d.mouseleave(function() { 
      $(this).fadeOut("fast", 0, function() { 
       $(this).remove(); 
      }).siblings("img.thumb").fadeTo("fast", 1.0); 
     }); 
    }); 
});

來源

2011-06-16 20:25:41

在鼠標懸停時，更改圖像的不透明度並覆蓋文字

回答

相關問題