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

所以问题是你试图在动态选择器上设置你的处理程序（＆＃34; img＃＆＃34; + j），但这不起作用。首先，当j未定义时，该等式仅在页面加载时评估一次。

所以你想这样做：

只为你的鼠标定位img标签...更好的是，为你的特殊图像提供所有相同的css类，这样你就可以将事件处理程序仅附加到那些。这会更有效率。
当图像被篡改过来时，抓住它的id属性，从中提取数字，然后用它来构建一个选择器，以显示适当的跨度。

var get_span_from_image = function（image）{ var image_id = image.attr（＆＃34; id＆＃34;）; var matches = image_id.match（/ theImg（\ d +）/）; if（匹配）返回$（＆＃34; theSpan＆＃34; +匹配[1]）; return $（）; //什么都没找到，返回一个空的jQuery选择 }; $（＆＃34; IMG＆＃34）。悬停（ function（）{//鼠标悬停 get_span_from_image（$（本））显示（）。 }， function（）{//鼠标移出。get_span_from_image（$（本））隐藏（）; } ）;

注意：有更好的方法来链接＆＃34;两个节点在一起，但这只是用您当前的结构回答您的问题。

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

因此，不是尝试从id属性中提取数字，更好的方法是告诉其中一个图像或跨越它的兄弟。您可以输出这样的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();
    }
);

希望这有帮助！

Answer 2

如果你在每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>

动态鼠标中心

2 个答案: