2

画像にカーソルを合わせると、div ボックスが表示され、ユーザーはその div からオプションを選択できるようになります。

<a class="show_img3" href="frequenz?link=3" class="btn">
  <img style="padding-top: 8px;padding-bottom: 26px;" src="<?php echo bloginfo( 'template_url' );?> /img/bouquet/2.png">
  <span class="bqy_no">BRAUCHE MEHR</span></a>
<div class="hide_img3"><a href=#>2</a><br><a href="#">3</a></div>

私の問題は、ホバーしようとするとオプションが消えるため、オプションを選択できないことです。

ここにjsフィドルがあります

フィドルを更新して、必要なものをより正確にしました。

4

6 に答える 6

2

これをテストしたところ、動作します：

$(document).ready(function(){

    $('.show_img3').hover(function(){
        $('.hide_img3').show();
    });
    $('.close a').click(function(){
        $('.hide_img3').hide();
    });
});​

開いた後に非表示にするには、X をクリックする必要があります。

あなたのためにそれを更新しました：

http://jsfiddle.net/m3qLx/7/

于 2012-08-22T12:18:07.617 に答える
2

このフィドルを試してください

親divを配置し、それに追加のクラスを適用しました。

あなたの Html と CSS は非常に乱雑で非セマンティックなので、読みやすくしてください。

于 2012-08-22T12:30:19.290 に答える
1

代わりに jQuery を使用してください。ユーザーがリンク/画像にカーソルを合わせると、div はそのままであると簡単に言えます。

仕組みは次のとおりです。

$('.show_img3').mouseover(function(){
    $('.hide_img3').show();
});
于 2012-08-22T12:17:37.517 に答える
1

あなたはjqueryを使うべきです

http://jsfiddle.net/m3qLx/8/

于 2012-08-22T12:18:28.627 に答える
1

jQueryを使用してこれを解決します。
私の理解が正しければ、クラス hide_img3 の div は非表示ですが、タグ内にある img をポイントすると、div が表示されますよね? そのために、このコードを使用できます。

$('.show_img3').hover(function () {
    $('.hide_img3').fadeIn(1000);
}, function () {
    $('.hide_img3').fadeOut(1000);
});
于 2012-08-22T12:20:12.370 に答える
0

「ホバリングしようとすると消える」

プレーンな CSS を使用する場合は、アンカーと div の両方を保持する下層のラッパーが必要です。そのラッパーに hover-state が適用されている場合、ボックスは開いたままになります。

于 2012-08-22T12:21:38.630 に答える