我正在尝试设置一个菜单,将鼠标悬停在照片上会显示人名和图像菜单下方的一些链接。我使用 mouseenter 和 fadein 来实现悬停效果,再加上一个将背景颜色设置为白色的 css 类(这样新元素就会覆盖旧元素)。 当我尝试将鼠标悬停回到某个已经显示的菜单项时,没有任何反应。 此外,悬停不适用于某些元素。当我从左侧悬停时,悬停在三个元素上不起作用。当我从右侧悬停时,只有前两项有效。 您能否提出问题可能是什么,以及如何解决这些问题?请注意,我需要在显示鼠标悬停时显示菜单,以便用户可以单击将在此处提供的链接。
脚本:
$(document).ready(function() {
$("#pau").mouseenter(function(){
$("#paup").fadeIn(600);
});
$("#red").mouseenter(function(){
$("#redp").fadeIn(600);
});
$("#aesthet").mouseenter(function(){
$("#aesthetp").fadeIn(600);
});
$("#danny").mouseenter(function(){
$("#dannyp").fadeIn(600);
});
$("#kisic").mouseenter(function(){
$("#kisicp").fadeIn(600);
});
$("#fake").mouseenter(function(){
$("#fakep").fadeIn(600);
});
$("#kaa").mouseenter(function(){
$("#kaap").fadeIn(600);
});
$("#heels").mouseenter(function(){
$("#heelsp").fadeIn(600);
});
$("#hodanajan").mouseenter(function(){
$("#hodanajanp").fadeIn(600);
});
$("#jakub").mouseenter(function(){
$("#jakubp").fadeIn(600);
});
});
HTML:
<div class='people'>
<div class='containertriangles'>
<div class='wrap' id='aesthet'>
<div class='crop'>
<img src='./img/triangles/aesthet.jpg'>
</div>
</div>
<div class='wrap' id='fake'>
<div class='crop'>
<img src='./img/triangles/afakeartist.jpg'>
</div>
</div>
<div class='wrap' id='danny'>
<div class='crop'>
<img src='./img/triangles/dannyrose.jpg'>
</div>
</div>
<div class='wrap' id='heels'>
<div class='crop'>
<img src='./img/triangles/heelsinprague.jpg'>
</div>
</div>
<div class='wrap' id='hodanajan'>
<div class='crop'>
<img src='./img/triangles/hodanajan.jpg'>
</div>
</div>
<div class='wrap' id='jakub'>
<div class='crop'>
<img src='./img/triangles/jakubmarik.jpg'>
</div>
</div>
<div class='wrap' id='kaa'>
<div class='crop'>
<img src='./img/triangles/kaaglo.jpg'>
</div>
</div>
<div class='wrap' id='pau'>
<div class='crop'>
<img src='./img/triangles/paulinemma.jpg'>
</div>
</div>
<div class='wrap' id='red'>
<div class='crop'>
<img src='./img/triangles/redpoppy.jpg'>
</div>
</div>
<div class='wrap' id='kisic'>
<div class='crop'>
<img src='./img/triangles/sandrakisic.jpg'>
</div>
</div>
</div>
CSS:
#aesthetp, #dannyp, #fakep, #heelsp, #hodanajanp, #jakubp, #kaap, #kisicp, #paup, #redp{
display:none;
position:absolute;
left:0;
right:0;
margin-top:-70px;
background-color:white;}
我使用的是我从这里得到的三 Angular 形布局:http://codepen.io/mikehobizal/pen/EHDsu
非常感谢您的帮助。
最佳答案
我会首先重组您的 html 以利用可重用的类而不是 id,并将内容嵌套在每个链接内,以便于引用。
<div class='wrap link'>
<div class='crop'>
<img src='./img/triangles/jakubmarik.jpg'>
</div>
<div class="content">
text and other stuff here
</div>
</div>
然后你可以简化javascript:
$(".link").mouseenter(function(){
$(.content').hide();
$(this).find('.content').fadeIn(600);
});
这将隐藏所有内容 div 并显示嵌套在您当前所在的 div 中的那个。
只要整个导航被包裹并且具有 position:relative,您仍然应该能够对内容 div 进行绝对定位。
关于javascript - 如何再次使用强制 Jquery mouseenter fadein?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33445633/