Question

如果我不够清楚的话，我是jq的新手，请原谅我。

小提琴：

http://jsfiddle.net/tWHpA/1/

在悬停时，两个div都会向上滑动，我是如何让它仅向上滑动已悬停的div？

HTML：

<div class="span1 green 1"><div class="hover">tile title</div><a href="#page2" rel="ajax"></a></div>
<div class="green 2"><div class="hover">tile1 title</div></div>

的CSS：

.green {width: 100px; height: 100px; background: red; color: white; position: relative; z-index:100;}      
.hover {width: 100px; height: 50px; background: yellow; position: absolute; bottom:0; display:none; z-index:-1;   }

JQ：

$(document).ready(function() {

    $('.green').addClass('.hover');


   $('.green').hover(function() {

          $('.hover').stop(true, true).slideDown('1000')

    },

    //Mouseout, fadeOut the hover class


    function() {

        $('.hover').stop(true, true).slideUp('1000');

    }).click(function() {

        //Add selected class if user clicked on it
        $(this).addClass('selected');


    });
});

Answer 1

在您的事件处理程序中，使用$(this)代替$(".hover")。

这将仅对接收事件的元素而不是所有元素进行操作。 jQuery将this设置为触发事件的元素。

$('.green').hover(function() {
    $(this).stop(true, true).slideDown('1000')
},function() {
    $(this).stop(true, true).slideUp('1000');
}).click(function() {
    //Add selected class if user clicked on it
    $(this).addClass('selected');
});

我认为你有一个逻辑问题，因为一旦你向上滑动，那个不再悬停的元素，就没有办法再将鼠标放在它上面让它下降。

稍微更改一下逻辑后，您可以在此处看到它：http://jsfiddle.net/jfriend00/6Szyb/

Answer 2

试试这个：

$(document).ready(function () {

    $('.green').addClass('.hover');
    $('.green').hover(function () {
        $(this).find('.hover').stop(true, true).slideDown('1000')
    },

    function () {
        $(this).find('.hover').stop(true, true).slideUp('1000');

    }).click(function () {

        //Add selected class if user clicked on it
        $(this).addClass('selected');
    });
});

jQuery - 使用相同的类定位特定元素

2 个答案: