Jquery 悬停在div上，但不悬停在主div之外的div上，因为位置：绝对

我想在悬停图像时显示此“取消选择”按钮，但在悬停图像下方的星星时不显示此按钮，这些星星位于image-div中。（绝对值，底部：-20px）

以下是HTML代码：

<div class="image-wrapper">
 <div class="stars"></div>
 <div class="deselect">deselect</div>
</div>

---

尝试添加css：

.stars { pointer-events:none;}

仅CSS

css

HTML

图像
* * * * *
取消选择

如果需要使用jquery，此脚本可能会有所帮助

---

我也尝试过同样的方法，但不起作用，这里是演示。你能告诉我这里怎么了吗@Tushar上述问题与javascript事件有关，您的示例显示了css:hover属性

.stars { pointer-events:none;}

.image-wrapper {
    background-color:#cccccc; 
    width: 100px;
    height: 100px;
    position: absolute;
    cursor: pointer;
}
.stars {
    color: yellow;
    position: absolute;
    bottom: -20px;
    width: 100px;
    height: 20px;
    background-color: grey;
    text-align: center;
    cursor: pointer;
}
.deselect {
    position: absolute;
    bottom:0;
    background-color: red;
    color: white;
    display: none;
    width: 100px;
    height: 20px;
    text-align: center;
}
.image-wrapper:hover .deselect {
    display: block;
}
.stars:hover + .deselect { /* adjacent sibling selector '+' */
    display: none;
}

<div class="image-wrapper">Image
 <div class="stars">* * * * *</div>
 <div class="deselect">deselect</div>
</div>

$(document).ready(function() {
    $(".deselect").css({"display":"block"});
    $(".image-wrapper").bind({
        mouseenter: function(){
            $(".deselect").css({
                "background":"red"
            });
        },
        mouseleave: function(){
            $(".deselect").css({
                "background":"inherit"
            });
        }
    });
});