Imagine this kind of strucure :
<div class="background">
<div class="object"></div>
</div>
<div class="foreground"></div>
My foreground
totally overlays my background
In my CSS I would like to change object property on hover (ie .object:hover{}
) Is there way to do that in CSS without moving my object
inside foreground
or using js ?
Update : My css as asked.
.background { background:url('background.svg') no-repeat; }
.foreground { background:url('foreground.svg') no-repeat 50% 50%; }
.object {
position: absolute;
top:10px;
left:10px;
opacity:1;
}
.object:hover
{
opacity:0.5;
}
The answer is kind of. You can use sibling selector ( +
), but you must revert order of your divs.
Example CSS:
.background {
position: absolute;
width: 600px;
height: 400px;
background-color: red;
}
.foreground {
position: absolute;
width: 300px;
height: 200px;
left: 150px;
top: 100px;
background-color: green;
z-index: 1;
}
.object {
width: 600px;
height: 400px;
}
.foreground:hover + .background .object {
background-color: blue;
}
and HTML:
<div class="foreground"></div>
<div class="background">
<div class="object"></div>
</div>
Working sample: http://jsfiddle.net/pBYwT/1/
div的较高z-index:要在顶部显示的悬停。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.