Javascript jQuery隐藏元素在使用CSS显示时保持隐藏

我有一个元素具有

display:none

属性。 现在，如果用户将鼠标悬停在父项上，将显示：

.item:hover .description {
    display: block; 
    z-index: 1;
}

现在，当我执行

$(".description").hide()

若要再次隐藏元素（用户可以单击元素中的X将其关闭），如果用户再次将鼠标悬停在父元素上，该元素将不会再次显示。它一直隐藏着

---

我怎样才能不弄乱css的显示和隐藏功能呢？

您给出代码的方式是将css和JavaScript混为一谈。jQuery使用内联样式来完成

.hide（）

或显示。和

内联样式

比CSS更具体。使用

class

es并切换它们，或者只使用JavaScript

我会这样做：

.item:hover.description{
显示：块；
z指数：1；
}
.项目.说明{
显示：无；
}

以上是一个纯CSS方法。但是使用JavaScript，我会考虑使用<代码> ToGLCGLASS（）/<代码>而不是<代码> .HIDED（）/<代码>或<代码>

.item:hover.description{
显示：块；
z指数：1；
}
.item.description.hidden{
显示：无；
}

在JS中：

$（.description”）.addClass（“隐藏”）；

当您希望显示时，您可以始终使用：

$（.description”）.removeClass（“隐藏”）；

对于切换，您可以使用：

$（.description”）.toggleClass（“隐藏”）；

这是因为在JS隐藏此元素时，您为其设置了可见性：hidden。在下一次关注父对象之后，您将不会设置visibility:visible，这是必需的

例如，您可以执行

$(".description").show() 

---

在下一次关注父元素之后，hide将添加一个内联样式来隐藏元素，在本例中它将覆盖CSS样式

如果您使用JavaScript隐藏元素，则需要使用JavaScript在不再相关时删除该内联样式。我会在

.item

上使用

mouseleave

事件处理程序，并使用一个类来隐藏

description

：

CSS:

隐藏响应单击X的说明：

$(".item .description").addClass("hide");

当用户不再悬停

.item

时删除该项：

$(".item").on("mouseleave", function() {
    $(this).find(".description.hide").removeClass("hide");
});

可以使用如上所述的直接处理程序，也可以使用事件委托（我在下面的示例中使用委托）

现场示例：

//单击X时隐藏
$（document.body）.on（“单击”，“.item.description.close”，函数（）{
$（this）.closest（“.description”）.addClass（“hide”）；
});
//当用户不再悬停时重置
$（document.body）.on（“mouseleave”，“.item”，function（））{
$（this.find（“.description.hide”）.removeClass（“hide”）；
});
.item.description{
显示：无；
}
.项目：悬停。说明{
显示：块；
z指数：1；
}
.item:hover.description.hide{
显示：无；
}
/*以下仅用于演示*/
.结束{
光标：指针；
}
.项目{
位置：相对位置；
高度：2米；
边框：1px纯黑；
}
.项目.说明{
位置：绝对位置；
背景色：#eee；
左：10em；
顶部：2个；
边框：1px实心#ddd；
}

我是第一项
我是描述1
[x]
我是第二项
我是描述2
[x]
我是第三项
我是描述3
[x]
但他希望它一开始是可见的，而不是在单击X之后。@T.J.Crowder更新了类似的内容。是的，我也是这么做的。当你再次将鼠标悬停在它上面时，这不会起作用；）@reflon我这里的主要论点不是混合使用JavaScript和CSS版本。没有其他内容。堆栈片段（
）用于可运行的示例。对于一个代码块，使用代码块按钮（
{}
）（或者用四个空格缩进）。
$(".item").on("mouseleave", function() {
    $(this).find(".description.hide").removeClass("hide");
});