Hover div over another

Question

I am programming a game. If my mouse goes over the red div, there is an alert.

But now i have a problem.

Instead of the mouse, i want, that there is an alert if another div hover over the red one.

do you have any ideas to solve this problem?

Thanks for helping :-)

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>

What you're looking for is 'collision detection'. You should find some good resources if you Google than. Also, just as an aside, you should really look in to using an external stylesheet. It will make your HTML much simpler and smaller. — Rory McCrossan, Jan 05 '17 at 18:45
Not sure I understand your question. How are the other divs hovering over the red one? — happymacarts, Jan 05 '17 at 18:46
Hope this helps http://stackoverflow.com/questions/4230029/jquery-javascript-collision-detection — Supradeep, Jan 05 '17 at 18:51

Hover div over another

0 Answers0