jQuery hover and box model?

Question

I seem to be encountering an issue I've never seen before, happening in both chrome and safari (mac, no other browsers tested yet) where a hover effect that changes the background of a sibling of the target element fails when the cursor hits any padding, borders or box-shadow the target has. Has anyone encountered this, and if so what was the solution? I imagine it can't be complex, yet I have come up empty handed with my search. The styles I am using are slightly atypical for me, so this is the first time I'm seeing it.

Thanks!

Sure, i'll do that I just didn't want to make it too specific since it seems to be a general thing. — Nathan Gilford, May 20 '16 at 21:58
https://jsfiddle.net/rcw0c64k/ - if you hit the 10px of padding at the top or bottom of the dropdown menu, or the box shadow in the bottom/right you will trigger the effect I am talking about. — Nathan Gilford, May 20 '16 at 22:06
I am using chrome what you want exactly to when you hover around tell me about functionality what you trying to do i will help you get that done.I saw the box shadow and margin it will not — codefreaK, May 20 '16 at 22:12
Thank you. What i want is the exact same functionality that is there, except for that the background on the category parent element disappears when ever the border, padding or box shadow of the child `ul` is hovered it stops working. — Nathan Gilford, May 20 '16 at 22:15
So you want the hover to continue even when they are in the margin or box shadow area — codefreaK, May 20 '16 at 22:16
Yes, box shadow and padding though margin isn't necessary for this specific task that'd be cool for my curiosity — Nathan Gilford, May 20 '16 at 22:24
the thing is when you venture out of the element so the hover cease to exist and its effect fails .It can only be done by tracking the mouse position and doing some complex things which is not worth it . — codefreaK, May 20 '16 at 22:35
If the box sizing is set to border box, arent padding, border and box shadow considered inside the element? — Nathan Gilford, May 20 '16 at 22:44
https://jsfiddle.net/97ovju38/1/ check this out this is the only work around and I think you may have even think of doing it this way and you were curious about why it cannot be done padding is on ul so the hove ris on different element see hover on box shadow is not possible if I am right — codefreaK, May 20 '16 at 23:00
What about removing the padding and just adding `:before` with a 10px height instead? Would that be a better solution you think? — Nathan Gilford, May 20 '16 at 23:08
but before cannot be accessed using jquery as its not in dom — codefreaK, May 20 '16 at 23:12
https://jsfiddle.net/97ovju38/3/ I absolutely did a blunder and I rectified it — codefreaK, May 20 '16 at 23:25

score 0 · Accepted Answer · edited May 23 '17 at 11:52

This the only work around for the first situation of hover around that padding

How do I include an element's margin in the hot-spot for jQuery's hover() event?

https://jsfiddle.net/97ovju38/3/

Answer to second question on how to trigger hover on box shadow answer in not possible as Box shadown not part of element

s css box-shadow part of element's box model?

$("li:last-child").hover(function() {
  $(this).prev().css("background-color","yellow")
}, function() {
  $(this).prev().css("background-color","red")
  });
  
  $("li:first-child").hover(function() {
  $(this).next().css("background-color","yellow")
}, function() {
  $(this).next().css("background-color","red")
  });

.div4 {
    width: 300px;
    height: 100px;    
    padding: 50px;
     margin: 50px;
    border: 1px solid red;
    box-sizing: border-box;
}
.div4:hover {
 border: 1px solid blue;
}
li:nth-child(1){
  display:block;
  height:10px;
  width:100px;
  background:yellow;
}
li{
  display:block;
  height:50px;
  width:100px;
  background:red;
}
li:hover{  background:yellow;}
li:last-child {
  display:block;
  height:10px;
  width:100px;
  background:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="div4">Hooray!</div>
<ul>

<li></li>
<li><a>dadasda</a></li>
<li><a>dadasda</a></li>
<li><a>dadasda</a></li>
<li></li>
</ul>

jQuery hover and box model?

1 Answers1