2

ページに img を表示する 3 つのボタンを作成しました。人々がHTML、CSS、またはJSとJqueryのボタンを乗り越えたときに画像が表示されるようにします。しかし、問題は、(まだ表示されていない) 画像にカーソルを合わせると、画像も表示されることです。

これは私が使用している私のウェブサイトです: My School Report.

タイを越えると、ボックスが現れます。下にスクロールすると、ボタンが表示されます。

ボタンの1つに使用するHTMLコードは次のとおりです。

<div id="vlek4">
<div id="jsandjq"><img src="img/js&jq.png" width="576" height="104" /></div>
</div>

ボタンの1つに使用するcssコードは次のとおりです。

#vlek4{
    background-image:url(../img/vlek4.png);
    background-repeat:no-repeat;
    position:absolute;
    top:980px;
    left:600px;
    width:163px;
    height:113px;

    -webkit-transition-duration: 1.2s;
    -moz-transition-duration: 1.2s;
    -o-transition-duration: 1.2s;
    transition-duration: 1.2s;
}

#vlek4:hover{
    position:absolute;
    left:542px;
    width:;
    height:;
}

#vlek4 #jsandjq{
    position:absolute;
    top:150px;
    left:-460px;
    width:163px;
    height:113px;
    opacity:0;
}

#vlek4:hover #jsandjq{
    position:absolute;
    top:150px;
    left:-460px;
    width:163px;
    height:113px;

    opacity:1;

    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
}

#vlek4:hover #jsandjq:hover img{
display:none;
visibility:hidden;}

Vlek4 は JS & Jquery ボタンの略です。jsandjq は、表示される画像を表します。

ここで私が間違っていることを知っている人はいますか? 問題は Chrome に表示されます。

ありがとう！

4

1 に答える 1

1

これは、隠し画像も含む div 全体にホバー効果を書き込んでいるためです。

ホバー div の外に画像を配置します。

<div id="vlek1">
          <div id="html"> <img src="img/html.png" width="576" height="104"> <!--Place this outside of the parent div--></div>  
 </div>

方法 2

opacity使用する代わりにvisibility。この場合、HTML を変更する必要はありません。

デモはこちら(出力パネルの一番下までスクロール)

トランジションエフェクト内のすべてのdivを指しているため、衝突しているため、最初のdivのみに変更.vierkant divします.vierkant > div.vierkant.vierkant

デモ 2

于 2013-05-29T10:41:07.463 に答える