0

画像の上にマウスオーバーイベントが発生したときに、画像の上にボタンが表示されるようにしようとしています。同じ機能を使用したい複数の画像が画面に表示されています。ボタンが常に存在するため、これを機能させるのに問題があります。それを機能させる方法について何かアドバイスはありますか？以下は、レンダリングされたhtmlとjavascriptです。

javascript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type = "text/javascript">

$(document).ready(function() {

$('.image').mouseover(function(){
            $('.munchbutton').show();
});
});

</script>

css

div.munchbutton{
    position: absolute; 
    bottom: 5px; 
    right: 0px;
    left: 60px;
}

div.wrapper{
    float:left; /* important */
    position:relative; /* important(so we can absolutely position the description div */ 
    padding: 5px;
}

html

<!-- wrapper div -->
    <div class='wrapper'>

    <!-- image -->
    <div class="image" style="position: relative; left: 0; top: 0;">

        <a href="/partners/Business/CNNMoney" >
            <img src="/static/CNNMoney.png" style="position: relative; top: 0; left: 0;"/>
        </a>

        <!-- partner munchbutton div --> 
        <div class='munchbutton'>
            <form method='post'><div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='7wq8pRYNCDkXUGRv7eU6qI1BU7RKyoT8' /></div>
                <input type="hidden" name="channel" id="channel" value="CNNMoney" />
                <input type='submit' class = 'add' value='Add to plate'/>
            </form>
        </div>
        <!-- end munchbutton div -->

    </div>
    <!-- end image div -->

    </div>
<!-- end wrapper div -->


<!-- wrapper div -->
    <div class='wrapper'>

    <!-- image -->
    <div class="image" style="position: relative; left: 0; top: 0;">

        <a href="/partners/Business/EconomistMagazine" >
            <img src="/static/EconomistMagazine.png" style="position: relative; top: 0; left: 0;"/>
        </a>

        <!-- partner munchbutton div --> 
        <div class='munchbutton'>
            <form method='post'><div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='7wq8pRYNCDkXUGRv7eU6qI1BU7RKyoT8' /></div>
                <input type="hidden" name="channel" id="channel" value="EconomistMagazine" />
                <input type='submit' class = 'add' value='Add to plate'/>
            </form>
        </div>
        <!-- end munchbutton div -->


    </div>
    <!-- end image div -->

    </div>
<!-- end wrapper div -->
4

2 に答える 2

4

が機能するため.show()には、まずボタンを非表示にする必要があります。

作業中のフィドル(唯一の変更点は、.munchbutton がdisplay: none;デフォルトになったことです)

これがあなたが求めていたものでない場合はお知らせください。

于 2012-11-18T16:51:44.763 に答える
0

マンチボタンの元の状態は、そこから表示できるはずdisplay: none;です。

また、ショーを設定するときは、そのdiv内にボタンを表示したいだけだと思う​​ので、おそらく使用する必要があります$(this).find('.munchbutton').show();

ここでは、マウスアウトがチェーンされたフィドル - http://jsfiddle.net/GTw8d/

于 2012-11-18T16:57:03.193 に答える