How To Hide HTML P Element On Mouse Hover Using CSS

Posted By Bajarangi soft , Posted On 03-11-2020

Using CSS we can hiding an element can be done by setting the display property to none. The element will be hidden, and the page will be displayed as if the element is not there.So today we discuss how to do it.

How To Hide HTML P Element On Mouse Hover Using CSS

Step 1:Create index.html file and implement as below code in it.

<p>This is a visible paragraph</p>

Step 2:Implement CSS code as below to hide p element text.

<style>
    body {
        background: #2e9ad0;
    }
    p{
        font-size: 30px;
    }
    p:hover {
        display: none;
    }
</style>

Complete Code For Hiding HTML P Element On Mouse Hover Using CSS.

<!DOCTYPE html>
<html>
<head>
    <title>How To Hide HTML P Element On Mouse Hover Using CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<style>
    body {
        background: #2e9ad0;
    }
    p{
        font-size: 30px;
    }
    p:hover {
        display: none;
    }
</style>
<body>
<br/><br/>
<div class="container">
    <br><br><br>
    <div class="text-center">
        <h1 id="color" style="color: white;">How To Hide HTML P Element On Mouse Hover Using CSS</h1>
    </div>
    <br>
    <div class="well">
        <p>This is a visible paragraph</p>
    </div>
    <br>
</div>
</body>
</html>