Question

我想要的是使用HTML和CSS（无JavaScript）来创建仅在鼠标指针悬停在其上时出现的链接。尝试使用CSS“display: none然后切换到display:block鼠标悬停对我来说没有用。将visibility: hidden切换为visibility: visible进行悬停也是如此。在这两种情况下，链接都是不可见的，但将其悬停在它应该的位置不会使它出现。

因此，我只是设置了前景色以匹配背景色。原油但现在有效，但这意味着如果配色方案发生变化，我必须确保更新两个设置。一个简单的例子：

HTML：

<p> Lorem ipsum sum blah blah blah <a class="outOfSight" href="#theLink">the link</a></p>
<ul>
    <li>Just</li>
    <li>some</li>
    <li>nonsense</li>
    <li>to</li>
    <li>take</li>
    <li>up</li>
    <li>space</li>
</ul>
<br>
<a name="theLink">destination</a>
You have reached your destination!

CSS：

.outOfSight {
    color: white;
}
.outOfSight:hover {
    color: black;
}

它也在http://jsfiddle.net/Bc4pB/4/。

这是唯一的方法吗？或者我不知道的display或visibility属性是否有些微妙？还有另一种方式吗？

Answer 1

使用不透明度怎么样？

.outOfSight {
    opacity: 0;
    color: black;
}
.outOfSight:hover {
    opacity: 1;
}

JS Fiddle

Answer 2

你不能将鼠标悬停在那些不存在的东西上（visibility和display都可以取出该元素）。我只想设置opacity: 0 / opacity: 1。

Answer 3

不使用像jQuery这样的东西，这将是你唯一的答案。

将其设置为'visibility：hidden'或'display：none'可以消除交互性。 'display：none'只是完全隐藏它，就像它不在那里，而'visibility：hidden'保持它的'质量'，但隐藏它看不见但不幸的是带走了所有的交互性。

其他人建议使用不透明度，这可能有用，但它不是超级浏览器友好的（如果你支持那些仍然使用较旧IE的不幸者）。

Answer 4

以下是JSFiddle中的示例。

将锚点包围在<span>中，然后将隐藏应用于跨度的子节点，如下所示：

<p> Lorem ipsum sum blah blah blah
    <span class="outOfSight"><a href="#theLink">the link</a></span>
</p>
<ul>
    <li>Just</li>
    <li>some</li>
    <li>nonsense</li>
</ul>
<br>
<a name="theLink">destination</a>
You have reached your destination!

然后你的CSS将是：

.outOfSight { display: inline-block; }
.outOfSight a {
    visibility: hidden;
}
.outOfSight:hover a {
    visibility: visible;
}

Answer 5

我认为这对你有用。

<强> CSS

.outOfSight {
    display:inline-block;
    text-indent:-9999px;
}
.outOfSight:hover {
    text-indent:0;
}

有关text-indent属性的更多信息http://www.w3schools.com/cssref/pr_text_text-indent.asp

Answer 6

.Out {
display:none;
color:black;
text-decoration:none;
}
.Out:hover {
display:inline:
color:red;
}

如何隐藏链接并将其显示在悬停状态？

6 个答案: