为了账号安全,请及时绑定邮箱和手机立即绑定

如何在CSS中使用“悬停”

/ 猿问

如何在CSS中使用“悬停”

慕丝7291255 2019-11-19 15:42:34

我使用下面的代码来实现此目标:


当鼠标悬停在锚点上时,会出现下划线,


却没用


    <a class="hover">click</a>


    a .hover :hover{

        text-decoration:underline;

    }

什么是正确的版本?


查看完整描述

3 回答

?
蝴蝶不菲

如果希望在鼠标悬停在链接上时出现下划线,则:


a:hover {text-decoration: underline; }

足够了,但是您也可以根据需要使用“ hover”的类名,以下内容同样适用:


a.hover:hover {text-decoration: underline; }

顺便提一下,可能值得指出的是,'hover'的类名并没有真正为元素添加任何内容,因为的psuedo元素与的a:hover功能相同a.hover:hover。除非只是使用类名的演示。


查看完整回答
反对 回复 2019-11-19
?
慕妹3242003

有很多方法可以做到这一点。如果您确实希望在A元素中具有“悬停”类,则必须执行以下操作:


a.hover:hover { code here }

再说一遍,在那里有这样的className并不常见,这是您进行常规悬停的方式:


select:hover { code here }

以下是一些示例:


1个

HTML:


<a class="button" href="#" title="">Click me</a>

CSS:


.button:hover { code here }

2

HTML:


<h1>Welcome</h1>

CSS:


h1:hover { code here }

:hover是许多伪类之一。


例如,您可以进行更改,可以在鼠标悬停在元素上,单击时以及之前单击时控制元素的样式。


HTML:


<a class="home" href="#" title="Go back">Go home!</a>

CSS:


.home { color: red; }

.home:hover { color: green; }

.home:active { color: blue; }

.home:visited { color: black; }

除了我作为示例给出的笨拙的颜色外,“ home”类的链接默认情况下为红色,鼠标悬停它们时为绿色,单击它们时为蓝色,而单击后为黑色。


希望这可以帮助


查看完整回答
反对 回复 2019-11-19
?
炎炎设计

不是答案,而是解释为什么CSS不匹配HTML。


在CSS空间中,空格用作分隔符,以告知浏览器查找子项,因此您的CSS


a .hover :hover{

   text-decoration:underline;

}

意思是“寻找一个元素,然后寻找它具有悬停类的任何后代,并寻找那些具有悬停状态的后代的任何后代”,并且将与该标记匹配


<a>

   <span class="hover">

      <span>

         I will become underlined when you hover on me

      <span/>

   </span>

</a> 

如果要匹配< a class="hover">I will become underlined when you hover on me</a>,则应使用a.hover:hover,这意味着“查找具有类悬停和悬停状态的任何元素”


查看完整回答
反对 回复 2019-11-19

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信