jQuery懸停和框模型？

Question

我似乎遇到了一個我從未見過的問題，發生在chrome和safari（mac，沒有其他瀏覽器測試過），當鼠標光標移動時，目標元素的兄弟背景變化的懸停效果擊中目標所具有的任何填充，邊框或方塊陰影。有沒有人遇到過這個問題，如果有的話，解決方案是什麼？我想它不可能很複雜，但我已經找到了空手而歸。我使用的樣式對我來說略顯不典型，所以這是我第一次看到它。

謝謝！

Answer 1

這

唯一的解決辦法懸停的第一種情況周圍填充

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

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

答案就如何在不可能的，因爲觸發盒陰影答案懸停第二個問題Box shadown不是元素的一部分

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>