CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ryan
Ryan

Reputation: 1164

Jquery MouseOver Events - Child is invisible

I'm writing a bit of code that mimics the F12 inspect tool that most browsers have. When hovering over an element, a div is appended with a semi-transparent blue colour, indicating that it's selected:

The problem that I'm having is that when moving the cursor over the child of an 'inspected' element, the child element does not actually get hovered:

Before Hover:

enter image description here

After Hover:

enter image description here

Here's my code (JS Bin):

$('body *').on('mouseover', function(e) {
  if ($(e.target).closest('.inspect_hover').length == 0) {
    $('<div class=\'inspect_hover\'></div>').appendTo(e.target);
  }
}).on('mouseout', function(e) {
  var mouse = [e.pageX, e.pageY];
    var min = [$(e.target).offset().left, $(e.target).offset().top];
    var max = [($(e.target).offset().left + $(e.target).width()), ($(e.target).offset().top + $(e.target).height())];
    if (!(mouse[0] >= min[0] && mouse[0] <= max[0]) || !(mouse[1] >= min[1] && mouse[1] <= max[1])) {
      $('div.inspect_hover').remove();
    }
});
.header {
  position: absolute;
  width: 400px;
  height: 200px;
  left: 20px;
  top: 20px;
  background-color: #efefef;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

.header h3 {
  position: relative;
  display: block;
  width: 100%;
  height: 40px;
  line-height: 40px;
  top: 40px;
  left: 0px;
  text-align: center;
  margin: 0px 0px 0px 0px;
}

.inspect_hover {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  margin: 0px 0px 0px 0px;
  background-color: rgba(126, 103, 238, 0.125) !important;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
  <div class='header'>
    <h3>Hello, World</h3>
  </div>
</body>
</html>

How would I change my JS so that when hovering over the child, the child element is also 'inspected'?

Thanks!

Upvotes: 2

Views: 45

Answers (1)

Asons
Asons

Reputation: 87191

Use prependTo instead of appendTo

$('body *').on('mouseover', function(e) {
  if ($(e.target).closest('.inspect_hover').length == 0) {
    $('<div class=\'inspect_hover\'></div>').prependTo(e.target);
  }
}).on('mouseout', function(e) {
  var mouse = [e.pageX, e.pageY];
    var min = [$(e.target).offset().left, $(e.target).offset().top];
    var max = [($(e.target).offset().left + $(e.target).width()), ($(e.target).offset().top + $(e.target).height())];
    if (!(mouse[0] >= min[0] && mouse[0] <= max[0]) || !(mouse[1] >= min[1] && mouse[1] <= max[1])) {
      $('div.inspect_hover').remove();
    }
});
.header {
  position: absolute;
  width: 400px;
  height: 200px;
  left: 20px;
  top: 20px;
  background-color: #efefef;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

.header h3 {
  position: relative;
  display: block;
  width: 100%;
  height: 40px;
  line-height: 40px;
  top: 40px;
  left: 0px;
  text-align: center;
  margin: 0px 0px 0px 0px;
}

.inspect_hover {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  margin: 0px 0px 0px 0px;
  background-color: rgba(126, 103, 238, 0.125) !important;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
  <div class='header'>
    <h3>Hello, World</h3>
  </div>
</body>
</html>

Upvotes: 1

Related Questions