将鼠标悬停在img上（引导程序3）

使用CSS我在遇到问题时稍后在页面上显示使用hover命令通过img标记显示div。我正在使用Bootstrap 3编写页面 - 任何想法为什么这可能是一个问题？ “hovershow”中的单词出现在页面上的正确位置，当它们最初不是使用CSS进行隐藏时，这使我认为命令本身存在问题。将鼠标悬停在img上（引导程序3）

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; 
}

来源

2013-10-29 user2512696

与你的情况，你不能因为在CSS你不能选择父母，你可以改变你的'Email_logo'并将其移动一步，并使用'〜'兄弟选择器，并选择子 –

这绝对不是CSS是如何工作的。

下面的CSS意味着有一个元素.hovershow某处内#Email_Logo：

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

嗯...这是不是这样的。你想要的东西可以通过一些简单的JavaScript或者HTML树和CSS的改变来实现。

来源

2013-10-29 20:37:30 LuudJacobs

是否有可能为非子元素显示悬停的div？ – user2512696

用css不，你可以用js来做 – DaniP

非常感谢Danko！ – user2512696

将鼠标悬停在img上（引导程序3）

回答

相关问题