Question

使用CSS我遇到麻烦在页面上稍后获取div以显示使用hover命令通过img标记。我正在使用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来实现。

在图像上悬停显示Div（Bootstrap 3）

1 个答案: