試圖做的onmouseover /的onmouseout效果

我想實現這個「圈/層」的效果（https://www.thinglink.com/）試圖做的onmouseover /的onmouseout效果

我的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(); 
});

http://jsfiddle.net/j3d6ogu4/

有時候，白色層不隱藏鼠標的時候了，你知道爲什麼嗎？

此外，我想設置紅點可見，當我在白色層也是。

謝謝！

來源

2015-05-15 user3800667

$(".bubble-container").hover(function(){ 
    $(this).find('.gps_ring').next('.layer').show(); 
},function(){ 
    $(this).find('.gps_ring').next('.layer').hide(); 
});

DEMO HERE

或者你可以使用.find（）

$(".bubble-container").hover(function(){ 
    $(this).find('.layer').show(); 
},function(){ 
    $(this).find('.layer').hide(); 
});

來源

2015-05-15 10:37:49

要保留上懸停的紅點，你需要添加一個.hovered類來表示的活動鏈接。（'。dot'）。addClass（'hovered'）和.removeClass（'hovered'） css：.gps_ring：hover div.dot，.gps_ring div.dot.hovered {background - 顏色：＃ef4036; } https://jsfiddle.net/j3d6ogu4/2/ – huwman

謝謝@ mohamed-yousef !!!!那麼白色裏面的紅圈怎麼樣？有沒有辦法在指針位於白色圖層上時使紅色圓圈可見？我感謝您的幫助！ – user3800667

哦！謝謝@huwman！我會立即嘗試你的解決方案！ :) – user3800667

試圖做的onmouseover /的onmouseout效果

回答

相關問題