Question

这是一个简单的问题，之前我已经做了好几次了，但由于某种原因，这次没有用。我有一个图像，当用户将其悬停时，应显示描述。

HTML：

<div class="description custom">
   <a class="description_help_text" href="">
     <img src="../../misc/help.png">
     <span>Bla bla bla.</span>
   </a>
</div>

CSS：

div.description a.description_help_text span {
    display: none;
}

div.description a.description_help_text a:hover span {
    display: block;
}

但由于某种原因，它不起作用。我猜我现在忽略了某种愚蠢的语法。

还有第二个问题，是否可以使用a - 标记而不链接它？因此，用户可以根据需要单击它，但是没有来自浏览器的操作？

Answer 1

我认为后面的CSS块应该是

div.description a.description_help_text:hover span {
    display: block;
}

对于没有操作的链接，我建议使用

<a href="#">link</a>

Answer 2

这似乎对我有用：http://jsfiddle.net/qVK6f/

至少回答你的第二个问题，试试：

<a href="javascript:void(0);">click</a>

Answer 3

你的CSS应该可以正常工作，所以我的猜测是你有一个影响它的父类。尝试查看Firebug中的ascendent样式。

重新。您的第二个问题，您可以不为锚元素提供href值，但这可能仍会导致页面在单击链接时跳转，而IIRC则无效HTML。另一种方法是链接到javascript:void(0);，尽管这是相当难看的IMO。

完全阻止任何链接行为的唯一方法是在javascript中为元素创建链接处理程序并在其中放置event.preventDefault();。

使用HTML和CSS轻松隐藏/悬停效果

3 个答案: