jquery - jQuery - 以同一类为目标的特定元素

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").

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

$('.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');
    });
});