Question

我希望在悬停图像时显示此“取消选择”按钮，但不要将图像下方的星形悬停在图像div中。（绝对，底部：-20px）

以下是HTML代码：

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

我不想把星星放在.image-wrapper之外/之外！

这不起作用：

$('.image-wrapper:not(.stars)').hover(

function () {
    $(this).find(".deselect").show();
},

function () {
    $(this).find(".deselect").hide();
});

Answer 1

如果你需要使用jquery，这个脚本可能会有帮助。

Demo

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

Answer 2

尝试添加你的css：

.stars { pointer-events:none;}

Answer 3

仅限CSS Demo

CSS

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

HTML

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

徘徊一个div，但不会因为位置而绝对徘徊在主div之外的div：绝对

3 个答案: