显示和隐藏悬停时最接近的元素不起作用

Question

我在一个页面中有多个元素，如下所示：

<div>
<span class="content_video_wrapper_video_icon">
<i class="glyphicon glyphicon-facetime-video"></i>
</span>
<span class="content_video_wrapper_video_text" style="display: none;">
<a href="...">Go to video</a>
</span>
</div>
<div>
<span class="content_video_wrapper_video_icon">
<i class="glyphicon glyphicon-facetime-video"></i>
</span>
<span class="content_video_wrapper_video_text" style="display: none;">
<a href="...">Go to video</a>
</span>
</div>
<div>
<span class="content_video_wrapper_video_icon">
<i class="glyphicon glyphicon-facetime-video"></i>
</span>
<span class="content_video_wrapper_video_text" style="display: none;">
<a href="...">Go to video</a>
</span>
</div>

我使用jquery在悬停时显示和隐藏具有类content_video_wrapper_video_text的最近元素，如下所示：

$(".content_video_wrapper_video_icon").each((i, el) => {
$(el).hover(
function() {
$(this).closest(".content_video_wrapper_video_text").show()
},
function() {
$(this).closest(".content_video_wrapper_video_text").hide()
}
)
})

我做错了什么？

Answer 1

当closest向上遍历时，尝试以下代码更改：
(获取最接近的div，然后找到所需元素(

$(".content_video_wrapper_video_icon").each((i, el) => {
$(el).hover(
function() {
//   $(this).closest(".content_video_wrapper_video_text").show()
$(this).closest('div').find(".content_video_wrapper_video_text").show()
},
function() {
//   $(this).closest(".content_video_wrapper_video_text").hide()
$(this).closest('div').find(".content_video_wrapper_video_text").hide()
}
)
})