0

画像の上にリンクを配置する際に問題があります。このリンクに不透明度とホバー状態を使用していて、なんとか機能させることができましたが、結果は期待したものではありません。ホバーが思うように動かない。これを行うにはもっと良い方法があると思います。誰かが私を助けてくれることを願っています。ありがとう！

HTMLコードは次のとおりです。

<ul id="content-images">
<li><img class="show2" src="img/some_img.png" width="176" height="168"></li>
<li><img class="show2" src="img/some_img2.png" width="176" height="168"></li>
<li><img class="show2" src="img/some_img3.png" width="176" height="168"></li>
</ul>
<span class="show"><a href="#">Link1</a></span>
<span class="show"><a href="#">Link2</a></span>

そしてCSSコード：

.show {
    opacity:0.8;
    position:relative;
    top:10px;
    left:10px;
  }
 .show:hover {
    opacity:1.0;
  }
 .show2 {
    left: 1px;
    opacity: 0.8;
    position: relative;
    top: -39px;
  }
 .show2:hover {
    opacity:1.0
  }
4

1 に答える 1

0

リンクと画像を「1 つとして動作」させたい場合は、javascript を使用する必要があります。以下に、リンクと画像が非常に単純化された方法でどのように機能するかの例を書きました。ライブ デモは JSFiddle で入手できます。JSFiddle

HTML:

<ul id="content-images">
<li><img id="image1" class="show2" src="http://placehold.it/100x100" width="176" height="168"></li>
</ul>
<span id="link1" class="show"><a href="#">Link1</a></span>

JS (JQuery):

$(document).ready(function(){
    //hover image
    $('#image1').hover(function(){
        $(this).fadeTo("slow",0.8);
        $("#link1").fadeTo("slow",0.8);
    });
    //reestablish previous display when mouse out
    $('#image1').mouseout(function(){
        $(this).fadeTo("slow",1);
        $("#link1").fadeTo("slow",1);
    });
    //hover link
    $('#link1').hover(function(){
        $(this).fadeTo("slow",0.8);
        $("#image1").fadeTo("slow",0.8);
    });
    //reestablish previous display when mouse out
    $('#link1').mouseout(function(){
        $(this).fadeTo("slow",1);
        $("#image1").fadeTo("slow",1);
    });
});

OBS: トランジション アニメーションが不要な場合は、"slow"内部の引数を削除するか、高速化する場合は にfadeTo変更します。"fast"

于 2013-08-08T13:20:39.957 に答える