我正在使用此菜单,我想在鼠标悬停在a上时显示一个外部div。
我已经搜索了所有stackoverlow,但是所有这些解决方案似乎对我来说都不起作用。我一定做错了什么。我希望对此有所帮助。
我的html
<div id="hover1"></div>
<div style="float: left; position: relative; left: 50%; margin-top: 237px;">
<img src="img/octo_logo.png" class="logo" />
</div>
<!-- MENU start -->
<div id="menu">
<ul>
<li><a href="bio.html"><span>BIO</span></a></li>
<li><a href="equipa.html"><span>EQUIPA</span></a></li>
<li><a href="reconhecimento.html"><span>RECONHECIMENTO</span></a></li>
<li><a href="parceiros.html"><span>PARCEIROS</span></a></li>
<li><a href="porque_nao.html"><span>PORQUE NÃO?</span></a></li>
<li><a href="contactos.html"><span>CONTACTOS</span></a></li>
</ul>
</div>
我的CSS:
#hover1{
width: 155px;
height: 650px;
background-color: #57C194;
float:left;
position: absolute;
display: none;
}
#menu a:hover + #hover1{
display: block;
}
这是菜单http://i.imgur.com/2qqjBpo.png的视图
以及我想要的结果http://i.imgur.com/7DtXsDE.png
编辑:我愿意使用jquery。
有了你之上的东西;一个简单的jQuery示例将类似于:
$('#menu a')
.on('mouseover', function (event) {
$('#hover1').show();
})
.on('mouseout', function (event) {
$('#hover1').hide();
});
编辑:
原因可能是因为DOM元素尚未准备好。
尝试将以上代码包装为:
$(function () {
// above code here
});
或如果不起作用:
$(document).ready(function () {
// above code here
});
$(function() {
// DOM ready
$('#menu a').hover(
function () {
$('#hover1').show();
},
function () {
$('#hover1').hide();
});
});
实时预览(如何工作)http://jsfiddle.net/e7bp0oz1/1/