Форум

s24344 · #1 (**permalink**) 09.12.2015, 11:57

Подскажите, пожалуйста. Как реализовать, чтобы событие срабатывало при наведении не на сам блок, а на произвольном расстоянии от него, например, 300px, либо любое другое указанное значение

Код:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>title</title>
	<link rel="stylesheet" href="css/style.css" />
	
	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
	 
<div id="back-top"></div>

</body>
</html>

Код:

 
*{
	margin: 0;
	padding: 0;
}

#back-top{
	position: fixed; top: 0; left: 0;
	display: block;
	width: 82px;
	background: #FF7055;
	opacity: 0.5;
	cursor:  pointer;
}

$(document).ready(function (){
	
	var backtop_h = $(window).height();
	// var backtop_w = $('#back-top').width() + 400;
	
	$('#back-top').css({"height": backtop_h});
											  
	$("#back-top").on("mouseenter", function(){ 
		console.log("mouseenter");
	});

});

рони · #2 (**permalink**) 09.12.2015, 13:08

s24344,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 *{
	margin: 0;
	padding: 0;
}

#back-top{
	position: fixed; top: 0; left: 0;
	display: block;
	width: 82px;
	background: #FF7055;
	opacity: 0.5;
	cursor:  pointer;
    height: 0;
    transition: all .8s ease-in-out;


}
#back-top.target{
  background-color: #00FF00; height: 100px;
}

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
 $(function() {
    $(document).mousemove(function(b) {
        var c = $("#back-top"),
            a = c.offset(),
            a = {
                top: a.top - 300,
                left: a.left - 300,
                right: a.left + c.width() + 300,
                bottom: a.top + c.height() + 300
            };
        c.toggleClass("target", b.pageX <= a.right && b.pageX >= a.left && b.pageY <= a.bottom && b.pageY >= a.top)
    })
});
  </script>
</head>

<body>
<div id="back-top"></div>
</body>

</html>

s24344 · #3 (**permalink**) 09.12.2015, 14:43

Большое спасибо.

Форум

Справочник

Discord чат

Курсы javascript