文字未显示在悬停上
问题描述:
我目前正在创建一个使用图片的网站,当它悬停时显示一小段文字。这与nowthisnews.com网站所做的相似。文字未显示在悬停上
但是,我无法得到这个工作正常。
这里是什么,我已经这么远的一个片段:
#facebook-menu {
display: none;
}
#facebook {
cursor: pointer;
}
#facebook:hover + #facebook-menu {
display: block;
}
<footer>
<div id="footer"></div>
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<br>
<ul class="list-inline">
<div class="hover">
<img href="" id="facebook" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-facebook-128.png" height="39px" width="39px"></div>
</ul>
</div>
</div>
</div>
<div id="facebook-menu">
<font size=5><b>Geeky Pixel</b>
<br><font size=2>
Get all news and updates directly to your Facebook feed.<font size=5>
谁能告诉我在哪里,我错了?
谢谢
请注意:编码不是我的强项。这里可能有很多错误。
答
标记中存在问题。为了使用+
#facebook-menu
应该是#facebook
的兄弟。我清理了标记。
下面的代码应该工作
#facebook-menu {
display: none;
}
#facebook {
cursor: pointer;
}
#facebook:hover + #facebook-menu {
display: block;
}
<footer>
<div id="footer"></div>
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<img href="" id="facebook" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-facebook-128.png" height="39px" width="39px">
<div id="facebook-menu">
<b>Geeky Pixel</b>
<p>Get all news and updates directly to your Facebook feed.</p>
</div>
</div>
</div>
</div>
</footer>
答
这里我使用jQuery,人们会说不需要悬停功能jWuery,但是做了更平滑的执行情况,这样做JS提供更好的跨浏览器一致性和绝对更多的选项。
$('#facebook').mouseenter(function()
{$('#facebook-menu').removeClass('puffOut').addClass('puffIn magictime');});
$('#facebook-menu').mouseleave(function()
{$('#facebook- menu').removeClass('puffIn').addClass('puffOut');});
我已经使用jQuery的位置,而不是JS,因为有一些车JS行为增加,并与普通的JS删除类时。
链接到笔:
http://codepen.io/damianocel/pen/YWaWJE
我已删除了部分你的CSS,并增加了一些关键帧动画。
只是用js做这个,我会在一分钟内为此做一个codepen。 –