Question

我正在编写游戏。如果我的鼠标越过红色div，则会发出警报。

但现在我有一个问题。

如果另一个div悬停在红色鼠标之上，我想要的不是鼠标，而是鼠标。

你有什么想法来解决这个问题吗？

感谢您的帮助： - ）

var keys = new Array();
var direction;
var direction;
var iNr = 0;

$(document).ready(function() {
  looper();
  $("#demo1").css("margin-top", 400 + "px");
  $("#demo2").css("margin-left", 380 + "px");
  myFunction();

  $(".all").mouseover(function() {
    if ($(this).hasClass("red") == true) {
      alert("ja");
    }
  });
});

function myFunction() {
  iNr = iNr + 0.5;
  $("#main").css("transition", "all 0.1s");
  $("#main").css("transform", "rotate(" + iNr + "deg)");

  setTimeout(function() {
    myFunction();
  }, 50);
}

function looper() {
  var p = $("#circle");
  var offset = p.offset();
  var t = $(".red");
  var roffset = t.offset();

  var rect1 = {
    x: offset.left,
    y: offset.top,
    width: p.width(),
    height: p.height()
  }
  var rect2 = {
    x: roffset.left,
    y: roffset.top,
    width: t.width(),
    height: t.height()
  }

  if (rect1.x < rect2.x + rect2.width && rect1.x + rect1.width > rect2.x && rect1.y < rect2.y + rect2.height && rect1.height + rect1.y > rect2.y) {
    console.log("now");
  }

  if (direction == "left") {
    if (offset.left - 50 > 0) {
      $("#circle").css("left", ($("#circle").position().left - 2) + "px");
    }
  }
  if (direction == "up") {
    if (offset.top - 50 > 0) {
      $("#circle").css("top", ($("#circle").position().top - 2) + "px");
    }
  }
  if (direction == "right") {
    if ((offset.left + 50) < $(window).width()) {
      $("#circle").css("left", ($("#circle").position().left + 2) + "px");
    }
  }
  if (direction == "down") {
    if ((offset.top + 50) < $(window).height()) {
      $("#circle").css("top", ($("#circle").position().top + 2) + "px");
    }
  }

  ID = window.setTimeout("looper();", 1);
}

$(document).keyup(function(event) {
  if (event.keyCode == 37) {
    var index = keys.indexOf("37");
    keys.splice(index, 1);
    direction = "";
  }
  
  if (event.keyCode == 38) {
    var index = keys.indexOf("38");
    keys.splice(index, 1);
    direction = "";
  }
  
  if (event.keyCode == 39) {
    var index = keys.indexOf("39");
    keys.splice(index, 1);
    direction = "";
  }
  
  if (event.keyCode == 40) {
    var index = keys.indexOf("40");
    keys.splice(index, 1);
    direction = "";
  }
});

$(document).keydown(function(event) {
  if (event.keyCode == 37) {
    keys.push("37");
    direction = "left";
  }
  
  if (event.keyCode == 38) {
    keys.push("38");
    direction = "up";
  }
  
  if (event.keyCode == 39) {
    keys.push("39");
    direction = "right";
  }
  
  if (event.keyCode == 40) {
    keys.push("40");
    direction = "down";
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body style="background-color:black; overflow-y:scroll;">
  <div style="width:400px; margin-left:500px; height:400px;" id="main">
    <div id="demo1" style="width:400px; height:20px; background-color:red; position:absolute;" class="red test all"></div>
    <div id="demo2" style="width:20px; height:400px; background-color:yellow; position:absolute;" class="test all"></div>
    <div id="demo3" style="width:400px; height:20px; background-color:blue; position:absolute;" class="test all"></div>
    <div id="demo4" style="width:20px; height:400px; background-color:green; position:absolute;" class="test all"></div>
  </div>
  <div style="width:25px; height:25px; background-color:white; position:absolute; border-radius:50%;" id="circle"></div>
</body>

将鼠标悬停在另一个上方

0 个答案: