jQuery - 仅当满足某些 HTML 属性时才在鼠标光标旁边显示图像答案

【问题标题】：jQuery - Display image next to mouse cursor only when certain HTML attribute is metjQuery - 仅当满足某些 HTML 属性时才在鼠标光标旁边显示图像
【发布时间】：2012-11-04 18:57:49
【问题描述】：

当前，当鼠标悬停在 div 上时，我会显示一个图像... 但如果“div”具有“align="center" 的 HTML 属性，我只在鼠标旁边显示什么图像，如果没有，那么我不希望图像显示？

我想我很安静，但我不知道如何调用 var “divalign” 属性，昨晚花了一整夜：S

$(document).ready(function() {
    var $img = $("#MainImage");
    $img.hide();
    var divalign = $("div").attr("align="center");
    $('div').mousemove(function(e) {
        $img.fadeIn(0);
        $img.offset({
            top: e.pageY - $img.outerHeight()-2,
            left: e.pageX - ($img.outerWidth()-18)
        });
    }).mouseleave(function() {
        $img.fadeOut(250);
    });
});

提前致谢。

【问题讨论】：

标签： javascript jquery html image hover

【解决方案1】：

试试这个：

$('div[align="center"]').mousemove(function(e) {
        $img.fadeIn(0);
        $img.offset({
            top: e.pageY - $img.outerHeight()-2,
            left: e.pageX - ($img.outerWidth()-18)
        });
      }
    }).mouseleave(function() {
        $img.fadeOut(250);
    });

【讨论】：

【解决方案2】：

  $('div').mousemove(function(e) {
      if ($(this).attr('align') === 'center') {
        // only show if the align attribute has value center
        $img.fadeIn(0);
        $img.offset({
            top: e.pageY - $img.outerHeight()-2,
            left: e.pageX - ($img.outerWidth()-18)
        });
      }
    }).mouseleave(function() {
        $img.fadeOut(250);
    });

【讨论】：

【解决方案3】：

你在这行有错误

 var divalign = $("div").attr("align="center");

改成

 var divalign = $("div").attr("align","center");

【讨论】：

【解决方案4】：

如果你可以给这些 DIV 一个类名（例如：class="alignCenter"），然后在这些 div 上注册事件处理程序，那就更简洁了。

$('div.alignCenter').on('mousemove', function(e) {
     ..........................

});

【讨论】：