css - 在 img 上悬停时显示 Div (Bootstrap 3)

Question

使用 CSS 我在稍后在页面上使用悬停命令在 img 标签上显示 div 时遇到了麻烦。我正在使用 Bootstrap 3 编写页面 - 知道为什么这可能是个问题吗？“hovershow”中的单词出现在页面上的正确位置时，它们最初不是使用 CSS 隐藏的，这让我认为命令本身存在问题。

HTML

<div class="col-md-4 col-sm-4">
    <img id="Email_Logo" class="featurette-image img-responsive" src="img/Email_Icon_Send1.jpg" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>

<div class="row">
    <div class="col-md-6 col-md-offset-3">
    <div class="hovershow"><p>This should show on hover</p></div>
</div>
</div>

CSS

.hovershow{
    display:none;
}

#Email_Logo:hover .hovershow{
    display: block;
}

Answer 1

这绝对不是 CSS 的工作方式。

下面的 CSS 暗示在.hovershow某处有一个元素#Email_Logo：

.#Email_Logo:hover .hovershow{
    display: block;
}

好吧……事实并非如此。您想要的可以通过一些简单的 Javascripting 或更改您的 HTML“树”和 CSS 来实现。