Question

标题可能有点误导。

http://jsfiddle.net/whb8A/

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

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

我应该查看Jquery备用吗？如果是这样，任何指南教程都会很棒，谢谢

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

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

左侧是我希望它的样式，但是删除h3标签并从类中删除h3。信息使其在右侧设置样式。这是我最关心的边框宽度，位置和填充

Answer 1

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

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

Answer 2

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

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

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

Answer 3

我在删除<h3>标记时看到的是文本周围的边距丢失。如果您需要，只需将<h3>替换为<span>，请更改CSS以匹配h3而不是display: block，并将{{1}}添加到规则中。

Answer 4

你的CSS接近结尾：

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

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

从CSS中移除.item，当您移除H3

时一切顺利

在悬停跨度样式上显示div

4 个答案: