CODEWITHSUNDEEP
jqueryhtmlcss
TobyLaur
TobyLaur

Reputation: 3

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:

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

I don't want to put the stars under/outside the .image-wrapper!

This doesn't work:

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

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

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

Upvotes: 0

Views: 108

Answers (3)

Road Name
Road Name

Reputation: 129

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

Upvotes: 1

4dgaurav
4dgaurav

Reputation: 11496

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

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

Upvotes: 0

webkit
webkit

Reputation: 3369

try to add in your css:

.stars { pointer-events:none;}

Upvotes: 0

Related Questions