使用jQuery鼠标悬停单个类的子实例

Targeting Child instance of single class using jQuery mouseover

本文关键字：实例 单个类 悬停 jQuery 鼠标 使用      更新时间：2023-09-26

当鼠标滚动到父div上时，试图瞄准子div的单个实例出现问题

当前编写的代码在页面上只有一个.slidswap_moused_over(父)类的实例时工作良好，但是如果有多个实例，则两者保持相同的宽度。

这是我拥有的"最有效"的jQuery:-

jQuery(function() {
    jQuery(".slidswap_moused_over").mousemove(function(e) {
         var offset = jQuery(this).offset();
         var relativeX = (e.pageX - offset.left);
         var relativeY = (e.pageY - offset.top);
         jQuery(".slidswap_left_image").css({ "width": relativeX });
         jQuery('.slidswap_drag_message').css({ "opacity": 0 });
    });
});

这里的演示- http://jsfiddle.net/5DjPw/5/

我知道我应该使用。parent，。children，。siblings或。next，但我不确定语法。

任何帮助都将是感激的:)

使用this的实例

jQuery(".slidswap_moused_over").mousemove(function(e) {
     var offset = jQuery(this).offset();
     var relativeX = (e.pageX - offset.left);
     var relativeY = (e.pageY - offset.top);
     jQuery(".slidswap_left_image", this).css({ "width": relativeX });
     jQuery('.slidswap_drag_message', this).css({ "opacity": 0 });
});
像看到:http://jsfiddle.net/5DjPw/6/

你觉得我已经帮你搞定了吗?如果我把某些部分做了过度的调整，我感到抱歉。

jQuery(function($) {
    $(".slidswap_moused_over")
    .each(function(){
        $(this)
        .mousemove(function(e) {
            var offset = $(this).offset();
            var relativeX = (e.pageX - offset.left);
            var relativeY = (e.pageY - offset.top);
            $(this).find(".slidswap_left_image").css({ "width": relativeX });
        })
        .mouseover(function(e){
            $(this).find(".slidswap_drag_message").animate(
                { 
                    "opacity": 0 
                },250);
        });
    })
});
http://jsfiddle.net/shanejones/5DjPw/9/

使用jQuery(this)来保存单个的。slidswap_moused_over

见脚本:-

jQuery(function() {
    jQuery(".slidswap_moused_over").mousemove(function(e) {
        var offset = jQuery(this).offset();
        var relativeX = (e.pageX - offset.left);
        var relativeY = (e.pageY - offset.top);
        jQuery(this).find(".slidswap_left_image").css({ "width": relativeX });
        jQuery(this).find('.slidswap_drag_message').css({ "opacity": 0 });
    });
});
相关文章：