如何使用css 在鼠标悬停时隐藏链接

发布网友 发布时间:2022-04-23 23:45

我来回答

2个回答

热心网友 时间:2022-04-21 17:57

标准的写法就是hover伪类(CSS3语法、IE8内核一下不支持),但不是给a,而是给其父元素。

例如:你的html结构是:

<ul>
<li><span>测试1</span><a href="#">测试1</a></li>
<li><span>测试1</span><a href="#">测试1</a></li>
<li><span>测试1</span><a href="#">测试1</a></li>
<li><span>测试1</span><a href="#">测试1</a></li>
</ul>

那么,对应的css则是:

ul li a {} /*默认状态*/
ul li:hover a {display:none;} /*默认状态*/

如上例的【双层/双列】文字(链接)块,li元素要给与相对定位(relative),span和a都要给与display:inline-block,显示为块元素,这样,默认情况下,隐藏span,悬停状态隐藏a。


还可以通过js或jq来控制li的选择器名称,如:li.hover {};这样兼容性更好。亦或者直接在li中写入onMouse事件也是可以的。

热心网友 时间:2022-04-21 19:15

display不行就用visibility:hidden
其实你写的css很浪费
a{}
a:hover{}
足以,明白不?

声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com