CODEWITHSUNDEEP
htmlcss
Thanh Khánh
Thanh Khánh

Reputation: 641

CSS for multi HTML layer

I have 2 or 3 div tags, position of them is absolute, so they are overlap and have the same parent, like this

<div class="parent">
   <div class="div1"></div>
   <div class="div2"></div>
   <div class="div3"></div>
</div>

I set css for div1 "cursor: not-allowed;", but it not apply because div1 is under div2 and div3. Is there any way to inherit cursor of under layer ? I want when I move pointer to div1, it show "not-allowed".

Thanks

Upvotes: 0

Views: 83

Answers (3)

c-smile
c-smile

Reputation: 27470

The only way is to set that cursor on their common .parent div. And use default cursor:auto on children of the .parent.

Upvotes: 0

Shwarz
Shwarz

Reputation: 105

You could bump the z-index on div1 to push it above the other two. I'm not sure if that would ruin your design, but if div1 could be displayed "on top" of the other two, it might do the trick.

.parent div {
    position: absolute;
}
.div1 {
    z-index: 1;
    cursor: not-allowed;
    background: blue;
    height: 100px;
    width: 100px;
}
.div2 {
    background: yellow;
    height: 100px;
    width: 200px;
}
.div3 {
    background: green;
    height: 100px;
    width: 300px;
}

Upvotes: 1

freejosh
freejosh

Reputation: 11383

You could use pointer-events: none on the 2 divs, but support is limited for IE. Here's a demo.

Upvotes: 1

Related Questions