Hovering A Div, But Not Hovering A Div Which Is Outside The Main-div Because Of Position:absolute

I want to show this 'deselect'-button on hovering the image but not on hovering the stars under the image which are in the image-div. (absolute, bottom:-20px) Here is the HTML Code

Solution 1:

if you need to work with jquery, this script might help.

Demo

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

Solution 2:

try to add in your css:

.stars { pointer-events:none;}

Solution 3:

CSS only 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

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