Question

我正在设置一些jQuery来检查屏幕上是否有热点可用，以确定是否在屏幕上显示帮助消息。如果热点可见，则根本不应显示帮助消息。

到目前为止，如果您在帮助消息淡入后将鼠标悬停在热点上，我还有一些脚本可以关闭帮助消息。但是，我不确定如何在帮助消息淡入之前检查热点已经徘徊。

此功能的主要原因是两个消息都在页面上的相同位置，并且此时它会创建堆叠效果。

请查看我的脚本以及目前为止的问题示例。如果将鼠标悬停在热点上，然后在光标仍在热点上的情况下刷新窗口，您应该会看到我的问题。

＆＃13;

$(document).ready(function() {

	$('.ws-hotspot').hover(function(){
		
		console.log("appeared");
		$('#ws-hotspot-helper').css('display', 'none');
		$(this).find(".ws-hotspot-view-more").animate({opacity: 0.8, marginLeft: "26px"},200);
	},function(){
		$('#ws-hotspot-helper').css('display', 'none');
	  	$(this).find(".ws-hotspot-view-more").stop().animate({opacity: 0, marginLeft: "22px"},50);
	});


	
	function hotspotHelper(){
		if(!$('#ws-hotspot-one .ws-hotspot-view-more').css('opacity') == 0.8){
			console.log("appeared");
			$('#ws-hotspot-helper').css('display', 'none');
		}
		else {
			$('#ws-hotspot-helper').delay(1000).fadeIn(1000).delay(5000).fadeOut(1000);
		};
	
	};

	$(hotspotHelper);
});

＆＃13;

	.ws-hotspot{
		z-index: 9999;
		position:absolute;
		background:blue;
		width:55px;
		height:55px;
	}
	
	 #ws-hotspot-helper{
		background:yellow;
		background-repeat: no-repeat;
		background-position: 1px -22px;
		display: none;
		min-width: 130px;
		padding: 0.37rem;
		padding-left: 1rem;
		position: absolute;
	    top: calc(16% + 9px);
	    left: calc(58% + 27px);
		border-radius: 3px 10px 10px 3px;
		border: 1px solid #c5c5c5;
		border-width: 1px 1px 1px 0px;
		font-size: 0.95rem;
		color: #58595b;
	}
	
	#ws-hotspot-helper span#ws-hotspot-helper-arrow{
		margin-left: 10px;
		margin-right: 3px;
		font-weight:400;
		font-size:1rem;
	}

	.ws-hotspot .ws-hotspot-view-more{
		display: inline-block;
	    opacity: 0;
		background:yellow;
		background-repeat:no-repeat;
		background-position: 2px -22px;
	    margin-left: 24px;
	    margin-top: 9px;
	    min-width: 80px;
	    padding: 7px;
		padding-left: 25px;
	    font-size: 0.87rem;
	    border-radius: 3px 10px 10px 3px;
		border:1px solid #c5c5c5;
		border-width:1px 1px 1px 0px;
		color:#58595b;
		text-align:center;
	}
	
	.ws-hotspot#ws-hotspot-one{
	    top: 16%;
	    left: 58%;
	}

	#red-box{
		position:relative;
		background:red;
		width:100%;
		height:100%;
	}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="red-box">
	<span id="ws-hotspot-helper"><span id="ws-hotspot-helper-arrow">&#9664;&nbsp;</span>find out more</span>
	<a href="#"><span class="ws-hotspot" id="ws-hotspot-one"><span class="ws-hotspot-view-more">view more</span></span></a>
</div>

＆＃13;

Answer 1

所以我发现.fadeIn（）仍会在.delay（）后面的ws-hotspot-helper元素上运行，尽管if语句将它设置为none。因此我改掉了这条线：

$（＆＃39;＃ws-hotspot-helper＆＃39;）。css（＆＃39; display＆＃39;，＆＃39; none＆＃39;）;

有关

$（＆＃39;＃WS-热点辅助＆＃39）除去（）;

这样就可以立即解决问题，因为只需将鼠标悬停在页面上，就可以查看更多信息＆＃34;元件。

希望通过回复来帮助别人。

检查onload以查看元素是否可见，如果没有显示另一个元素

1 个答案: