我正在尝试实现这种“圆/层”效果 ( https://www.thinglink.com/ )
我的 jQuery 技能很糟糕 :( 到目前为止，这就是我所做的...
HTML
<body style="margin:0; padding:0;">
<div class="container">
<div class="bubble-container bubble-a">
<a class="gps_ring" href="javascript:void(0);">
<div class="dot">dot</div>
</a>
<div class="layer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="bubble-container bubble-b">
<a class="gps_ring" href="javascript:void(0);">
<div class="dot">dot</div>
</a>
<div class="layer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="bubble-container bubble-c">
<a class="gps_ring" href="javascript:void(0);">
<div class="dot">dot</div>
</a>
<div class="layer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</body>
CSS
.container { background-color:black; width:100%; height:400px; }
.layer { background-color:#FFFFFF; display:none; position:absolute; top:-70px; right:20px; width:200px; height:200px; z-index:99999999; overflow:hidden; }
.gps_ring {
border: 2px solid #ffffff;
padding:6px;
-webkit-border-radius: 30px;
height: 30px;
width: 30px;
display:block;
-webkit-animation: 0.6s pulsate infinite alternate ease-in-out;
-moz-animation: 0.6s pulsate infinite alternate ease-in-out;
-ms-animation: 0.6s pulsate infinite alternate ease-in-out;
-o-animation: 0.6s pulsate infinite alternate ease-in-out;
animation: 0.6s pulsate infinite alternate ease-in-out;
opacity: 0.0;
}
.gps_ring div.dot { background-color:transparent; width:100%; height:100%; -webkit-border-radius:30px; outline:none; text-indent:-9999px; }
.gps_ring:hover div.dot { background-color:#ef4036; }
.bubble-container { position: absolute; }
.bubble-a {
left:150px;
top:100px;
}
.bubble-b {
left:250px;
top:260px;
}
.bubble-c {
left:350px;
top:180px;
}
@-webkit-keyframes pulsate {
0% {-webkit-transform: scale(1.0, 1.0); opacity: 1.0;}
50% {opacity: 1.0;}
100% {-webkit-transform: scale(1.3, 1.3); opacity: 1.0;}
}
jQuery
$(".bubble-container .gps_ring").hover(function(){
$(this).next().show();
$(this).next().focus();
});
$(".layer").mouseleave(function(){
$(this).hide();
});
有时鼠标移开时白色层不会隐藏，你知道为什么吗？
此外，我也想将红点设置为在我位于白色层上时可见。
谢谢!!
最佳答案
$(".bubble-container").hover(function(){
$(this).find('.gps_ring').next('.layer').show();
},function(){
$(this).find('.gps_ring').next('.layer').hide();
});
或者你可以只使用 .find()
$(".bubble-container").hover(function(){
$(this).find('.layer').show();
},function(){
$(this).find('.layer').hide();
});
关于jquery - 尝试做 onmouseover/onmouseout 效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30257260/