将鼠标悬停在文本上后使其消失答案

【问题标题】：Make text disappear after I hover over it将鼠标悬停在文本上后使其消失
【发布时间】：2016-11-28 20:25:03
【问题描述】：

我想让我的文字消失并在我将鼠标悬停在它上面时让它远离它，但我不知道如何。你们能帮帮我吗？

这是我的 CSS

p:hover {
    display: none;
}

这是我的html：

I want to be your <p>girl</p>friend.

提前感谢您的帮助！

【问题讨论】：

标签： html css text hover

【解决方案1】：

让你想消失的文本有一个特定的id，外部文本也有一个特定的文本。：

<p id="text">I want to be your <span id="disappear">girl</span>friend.</p>

单独使用 CSS 无法解决此问题，因为一旦您将元素悬停以使其消失，它将不再悬停而只会重新出现。这将导致它不断闪烁。所以为此，我们需要一些 Javascript：

var disappear = $("#disappear");
$("#text").hover(function(){
    disappear.hide();
}, function() {
    disappear.show();
});

此 Javascript 将 disappear 元素存储为对象。然后它等待text 元素悬停并“悬停”（第一个参数用于悬停，第二个参数用于“悬停”）。当text 悬停时，disappear 使用.hide(); 隐藏。当text 未悬停时，disappear 使用.show(); 显示。

这是一个小提琴：JSFiddle

【讨论】：

【解决方案2】：

给你的“p”标签分配一个类，然后给class:hover属性，显示：无；

HTML:
I want to be your <p class="disp">girl</p> friend.

CSS:
.disp:hover {
    display: none;
}

【讨论】：