动态鼠标进入

Question

我添加了一些带有内部 img 标签的 div。每个标签都有自己唯一的 id = "theImg"+i 其中 "i" 是数字。我想将鼠标悬停在特定的 img 上并显示 span 的内容（也有带有数字的特定 id）。到目前为止，这是我的代码，但无法正常工作。

var j;  
document.onmouseover = function(r) {
    console.log(r.target.id);
    j = r.target.id;
}

$(document).on({
    mouseover: function(e){
     $("span").show();
    },
    mouseleave: function(e){
     $("span").hide();
    }
}, "img#"+j);

Answer 1

如果您在每个img 之后都有一个跨度，那么根本不使用 JavaScript 可能是个好主意？ ;-)

您可以在 CSS 中使用 :hover 伪类，让您的东西始终可靠地工作。

考虑以下示例：

img + span {
  display: none;
}
img:hover + span {
  display: block;
}

/*/ Optional styles /*/
div {
  position: relative;
  float: left;
}
div img + span {
  position: absolute;
  color: #fff;
  background: #27ae60;
  border: solid 1px #2ecc71;
  border-radius: 50px;
  z-index: 1;
  bottom: 1em;
  width: 80%;
  left: 50%;
  margin-left: -43%;
  padding: 2% 3%;
  text-align: center;
}

<div>
  <img src="https://placehold.it/400x200">
  <span>This is an image of a gray rectangle!</span>
</div>

<div>
  <img src="https://placehold.it/200x200">
  <span>This is an image of a gray square!</span>
</div>

<div>
  <img src="https://placekitten.com/g/400/200">
  <span>This is an image of a cute kitten inside a rectangle!</span>
</div>

<div>
  <img src="https://placekitten.com/g/200/200">
  <span>This is an image of even cuter kitten inside a square!</span>
</div>

Answer 2

所以问题是您试图在动态选择器（“img#”+j）上设置处理程序，但这不起作用。一方面，当 j 未定义时，该等式只会在页面加载时计算一次。

所以你想这样做：

1. 只针对鼠标悬停的 img 标签...这样会更有效率。

2. 当鼠标悬停或移出图像时，获取它的 id 属性，从中提取数字，然后使用它构建选择器以显示适当的跨度。

   var get_span_from_image = function(image) { var image_id = image.attr("id"); var 匹配 = image_id.match(/theImg(\d+)/); if(matches) return $("theSpan" + matches[1]); 返回 $(); // 没有找到，返回一个空的 jQuery 选择 }; $("img").hover( function() { // 鼠标悬停 get_span_from_image($(this)).show(); }, function() { // 鼠标移出 get_span_from_image($(this)).hide(); } );

注意：有更好的方法将两个节点“链接”在一起，但这只是用你当前的结构来回答你的问题。

更新：将两个节点链接在一起的一些想法

因此，与其尝试从 id 属性中提取数字，更好的方法是告诉图像中的一个或 span 关于它的兄弟姐妹。你可以像这样输出你的html，例如：

<img id="theImg1" data-target="theSpan1" class="hoverable" src="..."/>
....
<span id="theSpan1">...</span>

当然，现在你的想法可以是任何东西——你不必使用数字值或任何东西。

那么你的悬停代码就变得很简单了：

var get_span_from_image = function(image) {
    var span_id = image.data("target");
    return $("#" + span_id);
};
$("img").hover(
    function() { // mouse over
        get_span_from_image($(this)).show();
    },
    function() { // mouse out
        get_span_from_image($(this)).hide();
    }
);

希望这会有所帮助！