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

【问题标题】：Easy hide/hover effect with HTML and CSS使用 HTML 和 CSS 轻松隐藏/悬停效果
【发布时间】：2011-11-28 14:46:06
【问题描述】：

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

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-tag？所以用户可以随心所欲地点击它，而无需浏览器进行任何操作？

【问题讨论】：

怎么不工作了？对于a 标签未在任何地方链接使用<a href="javascript:void(0);" ></a>
只使用不带href的锚...在这种情况下，您必须使用css强制handcourser

标签： html css show-hide

【解决方案1】：

我认为后面的 CSS 块应该是

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

对于没有动作的链接我推荐使用

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

【讨论】：

是的，就是这样 :) 因为锚中没有锚子
使用<a href="#">link</a> 不是他想要的，请参阅this

【解决方案2】：

您的 CSS 应该可以正常工作，所以我的猜测是您在某处有一个影响它的父类。尝试浏览 Firebug 中的上升风格。

回复。您的第二个问题，您可以不向锚元素提供 href 值，但这可能仍会导致单击链接时页面跳转，并且 IIRC 它不是有效的 HTML。另一种方法是链接到javascript:void(0);，尽管这在 IMO 上相当丑陋。

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

【讨论】：

你是对的。还有其他一些父类阻止了我的 CSS 流程。谢谢！

【解决方案3】：

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

至少要回答您的第二个问题，请尝试：

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

【讨论】：