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?

＆＃13;

@Html.DropDownListFor(m => m.SelectedListOptionID, Model.OptionsList)

＆＃13;

$("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")
  });

＆＃13;

.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;
}

＆＃13;

jQuery悬停和盒子模型？

1 个答案: