nelis96 nelis96 - 10 days ago 6
CSS Question

Make text disappear after I hover over it

I want to make my text disappear and keep it away when I hover over it, but I don't know how. Can you guys help me out?

This is my CSS

p:hover {
display: none;
}


and this is my html:

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


Thank you in advance for your help!

Answer

Make the text you want to disappear have a specific id and the outer text have a specific text as well.:

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

CSS alone will not work for this, because once you hover the element to make it disappear, it will no longer be hovering and will just reappear. This will cause it to continually flicker. So for this, we'll need some Javascript:

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

This Javascript stores the disappear element as an object. It then waits for the text element to be hovered and "unhovered" over (the first parameter is for hover, the second is for "unhovering"). When text is hovered, disappear is hidden using .hide();. When text is unhovered, disappear is shown using .show();.

Here's a fiddle for it: JSFiddle

If you choose to use the Javascript, then the CSS code I provided is not needed.