当我将鼠标悬停在其上时，使文本消失

Question

我想让我的文本消失，并将其悬停在其上方，但我不知道如何。你们能帮我吗？

这是我的CSS

p:hover { 
    display: none; 
} 

，这是我的html：

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

预先感谢您的帮助！

Answer 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徘徊时，使用.hide();隐藏disappear。当text被隐藏时，disappear使用.show();显示。

这里有一个捣鼓它：JSFiddle

Answer 2

给你的“p”标签分配一个类，然后给这个类：hover属性，display：none;

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

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