1

私はこの問題の途中ですが、行き詰まっています。過去にも同様の問題が提起されたと思いますが、私が探しているものは何もありません。

私は現在jsFiddleにいくつかのデモコードを持っています。これはここで見ることができます：http：//jsfiddle.net/WolfHook/jb36D/

HTML

<div id="thumbsContainer">
<div class="imageHolder">
    Image in Here...
</div>
<div class="imageHolder">
    Image in Here...
</div>
<div class="imageHolder">
    Image in Here...
</div>

CSS

#thumbsContainer {
background:#000;
padding:20px;
overflow:auto;}

.imageHolder {
background:#eee;
float:left;
margin:5px;
width:50px;
height:50px;
padding:5px;
border:1px solid #666;}

jQuery

$('#thumbsContainer').children('.imageHolder').hover(function() { $(this).siblings().stop().animate({'opacity':'0.5'}); }, 
function() { $(this).siblings().stop().animate({'opacity':'1'}); });

望ましい効果は、すべてのdivを通常どおりに表示し、divにカーソルを合わせると、周囲の他のdivがグレー表示されるか、何らかのオーバーレイが追加されることです。目的は、マウスポインタを置いているdivが強調表示されている印象を与えることです。

jsFiddleにあるコードがこれを実現していることがわかりますが、ある種のオーバーレイではなく各divに不透明度が適用されているため、問題が発生しています。現在のプロジェクトでは、divは完全な黒ではなく背景画像の上にあります。背景なので、不透明度は機能せず、全体が混乱しているように見えます。

理想的には、ハイライトされていないdivにdivオーバーレイを適用したいと思います。これは、CSSを使用してスタイルを設定し、グレー表示の効果を与えることができます。この段階で、私は望ましい効果を達成する方法についての提案を完全に受け入れています。

チップを入れて私にいくつかのポインタを提供するのに十分親切な人はいますか？

とても有難い。

4

1 に答える 1

1

imageHolder div に不透明度を適用したり、新しいオーバーレイ要素を導入したりする代わりに、div のコンテンツ (サムネイル画像など) に不透明度を適用してみませんか? imageHolder の背景色が透けて見え、「グレーアウト」効果のグレーが提供されます。

新しい：

$('#thumbsContainer').children('.imageHolder').hover(function() { 
    $(this).siblings().children('img').stop().animate({'opacity':'0.5'}); }, 
    function() { $(this).siblings().children('img').stop().animate({'opacity':'1'});
});

imageHolders 内のサムネイルとその背後にある背景画像を使用して更新するサンプル: http://jsfiddle.net/jb36D/11/

于 2013-02-06T19:41:09.760 に答える