How to make text appear when hover over a href

和自甴很熟 提交于 2019-12-23 08:30:04

问题


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?


回答1:


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> 



回答2:


that's simple just add title attribute in tag

<a href="http://www.studyofcs.com" title="Tricks Site">Studyofcs</a>



回答3:


In case you are using bootstrap you can use the following:

<a class="login" href="" data-toogle="tooltip" title="Access your profile here">Login</a>



来源:https://stackoverflow.com/questions/29400034/how-to-make-text-appear-when-hover-over-a-href

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!