0
我正在設置一些jQuery來檢查屏幕上是否顯示熱點，以確定屏幕上是否顯示幫助消息。如果熱點可見，則根本不應顯示幫助消息。檢查onload以查看元素是否可見，如果不顯示其他元素
到目前爲止，我已經有一些腳本來關閉幫助信息，如果您在幫助信息淡入後懸停熱點。但是，如果熱點已經徘徊。
此功能的主要原因是這兩個消息都在頁面上的相同位置，並在創建堆疊效果的那一刻。
請在下面找到我的腳本和一個問題的例子。 如果你將鼠標懸停在熱點上，然後用光標仍然在熱點上刷新窗口，你應該看到我的問題。
$(document).ready(function() {
\t $('.ws-hotspot').hover(function(){
\t \t
\t \t console.log("appeared");
\t \t $('#ws-hotspot-helper').css('display', 'none');
\t \t $(this).find(".ws-hotspot-view-more").animate({opacity: 0.8, marginLeft: "26px"},200);
\t },function(){
\t \t $('#ws-hotspot-helper').css('display', 'none');
\t \t $(this).find(".ws-hotspot-view-more").stop().animate({opacity: 0, marginLeft: "22px"},50);
\t });
\t
\t function hotspotHelper(){
\t \t if(!$('#ws-hotspot-one .ws-hotspot-view-more').css('opacity') == 0.8){
\t \t \t console.log("appeared");
\t \t \t $('#ws-hotspot-helper').css('display', 'none');
\t \t }
\t \t else {
\t \t \t $('#ws-hotspot-helper').delay(1000).fadeIn(1000).delay(5000).fadeOut(1000);
\t \t };
\t
\t };
\t $(hotspotHelper);
});\t .ws-hotspot{
\t \t z-index: 9999;
\t \t position:absolute;
\t \t background:blue;
\t \t width:55px;
\t \t height:55px;
\t }
\t
\t #ws-hotspot-helper{
\t \t background:yellow;
\t \t background-repeat: no-repeat;
\t \t background-position: 1px -22px;
\t \t display: none;
\t \t min-width: 130px;
\t \t padding: 0.37rem;
\t \t padding-left: 1rem;
\t \t position: absolute;
\t top: calc(16% + 9px);
\t left: calc(58% + 27px);
\t \t border-radius: 3px 10px 10px 3px;
\t \t border: 1px solid #c5c5c5;
\t \t border-width: 1px 1px 1px 0px;
\t \t font-size: 0.95rem;
\t \t color: #58595b;
\t }
\t
\t #ws-hotspot-helper span#ws-hotspot-helper-arrow{
\t \t margin-left: 10px;
\t \t margin-right: 3px;
\t \t font-weight:400;
\t \t font-size:1rem;
\t }
\t .ws-hotspot .ws-hotspot-view-more{
\t \t display: inline-block;
\t opacity: 0;
\t \t background:yellow;
\t \t background-repeat:no-repeat;
\t \t background-position: 2px -22px;
\t margin-left: 24px;
\t margin-top: 9px;
\t min-width: 80px;
\t padding: 7px;
\t \t padding-left: 25px;
\t font-size: 0.87rem;
\t border-radius: 3px 10px 10px 3px;
\t \t border:1px solid #c5c5c5;
\t \t border-width:1px 1px 1px 0px;
\t \t color:#58595b;
\t \t text-align:center;
\t }
\t
\t .ws-hotspot#ws-hotspot-one{
\t top: 16%;
\t left: 58%;
\t }
\t #red-box{
\t \t position:relative;
\t \t background:red;
\t \t width:100%;
\t \t height:100%;
\t }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="red-box">
\t <span id="ws-hotspot-helper"><span id="ws-hotspot-helper-arrow">◀ </span>find out more</span>
\t <a href="#"><span class="ws-hotspot" id="ws-hotspot-one"><span class="ws-hotspot-view-more">view more</span></span></a>
</div>