在悬停跨度样式上显示 div答案

【问题标题】：Show div on hover span styling在悬停跨度样式上显示 div
【发布时间】：2011-09-11 06:27:32
【问题描述】：

标题可能有点误导。

http://jsfiddle.net/whb8A/

我在 span 标签中有一个 h3 元素，当然它不应该放在那里，但是我似乎无法以我想要的方式在 div 中设置跨区文本的样式。

如果您将鼠标悬停在 jsfiddle 中的图像上，则会显示隐藏的 div，这正是我希望它看起来的样子，但是如果我将 h3 标签从文本中移开，我似乎无法使用 CSS 对其进行样式设置.

我应该看一个 Jquery 替代品吗？如果是这样，任何指南教程都会很棒，谢谢

更新：感谢到目前为止的所有帮助，但我认为我解释得不是很好。

http://imageshack.us/photo/my-images/827/examplewc.jpg/

左侧是我希望它的样式，但是删除 h3 标记并从类 .info 中删除 h3 会使其样式与右侧相同。是我最关心的边框宽度、位置和内边距

【问题讨论】：

我无法复制您似乎遇到的问题...请参阅此更新的小提琴：jsfiddle.net/Wexcode/whb8A/3
那个“白条”（边框）应该在那里吗？
this 有什么问题
我应该更具体。在原始小提琴上，当黑色 div 与文本一起显示时，文本下方有一个 5px 边框，该边框与 div 的宽度相同。 .info h3 上的边距和内边距设置边框样式，但没有 h3 标签，边框仅沿着黑色 div 的底部运行，没有边距
@luca，唯一的问题是代码不正确且无法验证。我只是希望有一个正确的方法来做到这一点

标签： css html

【解决方案1】：

另一种解决方案是将文本样式定义直接放在<a> 标签下，从而覆盖默认的锚标签样式。示例：

.featured a {
    color: #fff;
    text-transform: uppercase;
}

【讨论】：

【解决方案2】：

如果有人感兴趣，我解决了这个问题。

我没有使用 h3 标签和 span，而是将两者都删除了，而是在悬停时出现的 div 中放置了一个 div。你可以在下面的小提琴中看到我的意思。现在在 html5 中进行验证，这就是我所追求的，感谢所有帮助

http://jsfiddle.net/whb8A/62/

【讨论】：

【解决方案3】：

当我删除<h3> 标签时，我看到的只是文本周围的空白。如果您想恢复它，只需将 <h3> 替换为 <span>，更改 CSS 以匹配它而不是 h3，然后将 display: block 添加到规则中。

【讨论】：

【解决方案4】：

你的 CSS 接近尾声：

.item a:hover .info {
    display: block;
    position: absolute;
    bottom: 10px;
    left: 30px;
    width: 250px;
    margin: 0;
    padding: 10px;
    background: #000;
}

这将选择 .item 元素内悬停的 a 标记内的所有 .info 元素，但在您的 HTML 中您有 没有 .item 元素

从 CSS 中删除 .item，当你删除 H3 时一切都很好

【讨论】：

.item 用于 span 类？
抱歉，.item 不应该在 css 代码中。但是，如果我从 html 和 .info h3 类 jsfiddle.net/whb8A/34 中删除 h3 标签，则边框不会像以前那样设置样式