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

munchbutton 的原始状态应该是display: none;，然后您可以从那里显示它。

另外，当您设置显示时，我假设您只想在该 div 中显示按钮，因此您可能应该使用$(this).find('.munchbutton').show();

这里有一个鼠标悬停的小提琴 - http://jsfiddle.net/GTw8d/

于 2012-11-18T16:57:03.193 回答