Question

我已经为照片列表完成了以下代码，当用户将鼠标悬停在图片上时，alt会显示：

我想知道无论如何我只能移动鼠标悬停元素，而不是像我现在那样移动它们。

#{list items:gallery.listPictures(), as:'picture'}
    <a class="pic" href="@{Galleries.showPicture(picture.id)}"><img src="@{Application.getPicture(picture.id)}" alt="${picture.name}" />
        <span class="alt">${picture.name}</span>
    </a>
#{/list}
<script type="text/javascript">
$(function(){
$(".pic").mouseover(function(event){
    $(".alt").css({'top': event.pageY, 'left': event.pageX});  
});

}）;

Answer 1

<script type="text/javascript">
$(function(){
$(".pic").mouseover(function(event){
    $(this).find(' > span').css({'top': event.pageY, 'left': event.pageX});  
});
</script>

注意$(this)。在jQuery函数this内部将访问触发事件的当前元素。

请参阅jQuery selectors和jQuery child-selector以及jQuery .find()

Jquery：仅移动正确的容器

1 个答案: