Search code examples
htmlcsstexthref

How to make text appear when hover over a href

How would I make text appear under a link?

<div class="login">
    <a href="">Login
    <p>Access your profile here</p>
    </a>
</div>

Where the login triggers the p to show?

Do I need to use the p or something else?

Solution

  • The following style makes the p visible on hover:

    .login a p {display:none;}
.login a:hover p {display:block;}
    <div class="login">
    <a href="">Login
        <p>Access your profile here</p>
    </a>
</div>

    Or if you want the whole link including p inside stay visible together on hover use the following:

    .login a p {display:none;}
.login a:hover p {display:block;}
.login a:hover {display:block;}
    <div class="login">
    <a href="">Login
        <p>Access your profile here</p>
    </a>
</div>