html鼠标悬停显示多个div,当我将鼠标悬停在另一个上时,jQuery仅显示一个div

我有一些与此结构类似的块.

在将鼠标悬停在“ item_name”块之前,我的“ info_hover”块一直处于隐藏状态.但是当我将其悬停时,将显示所有“ info_hover”块.如何使“ info_hover”块仅在该div上显示我所悬浮的内容.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, sapiente! ipsum dolor sit amet.

item_name

item_price

jQuery代码：

$( ".item_name" ).hover(

function() {

$( ".info_hover" ).show();

}, function() {

$( ".info_hover" ).hide();

}

);

解决方法:

这应该工作：

$( ".item_name" ).hover(

function() {

$(this).closest(".item_block").find(".info_hover").show();

}, function() {

$(this).closest(".item_block").find(".info_hover").hide();

}

);

之所以引用它,是因为您要访问相对于悬停元素的元素.然后,找到一个父元素,该元素同时包含此元素和要访问的元素.在这种情况下,.item_block是单个项目的顶级父项是合乎逻辑的选择.之后,您可以在父级中找到要访问的元素.最后,根据需要修改元素.

标签：css,html,javascript,jquery

来源： https://codeday.me/bug/20191111/2021687.html