Hi there, I have a query regarding the General Sibling Selector.
Let's start by looking at the HTML:
<div id="layout-middle">
<div id="Center">
<a class="col Picture1">Title1</a>
<a class="col Picture2">Title2</a>
<a class="col Picture3">Title3</a>
<a class="col Picture4">Title4</a>
<a class="col Picture5">Title5</a>
<a class="col Picture6">Title6</a>
</div>
</div>
<div id="bg"></div>
CSS:
#layout-middle {
background: #d3d1ce url('Images/middle.jpg') top center repeat-x;
border-bottom: 4px solid #777674;
}
#Center {
margin: 0 auto;
display: table;
}
.col {
border: 1px solid #3E414A;
text-align: center;
float: left;
width: 160px;
height: 375px;
padding-top: 16px;
margin-top: -93px;
}
#bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-image: url('Images/bg-top.jpg');
transition: .25s;
pointer-events: none;
}
#Bg serves as a background image behind all elements.
All images are formatted like this:
.Image1{
background: url('Images/PictureXY.png') 0 0 no-repeat;
}
Now my question is, when I hover over, for example, Picture1, how can I change the #bg background image to a new one without using Javascript, only CSS?
Normally, I would do something like:
.col:hover ~ #bg{
background-image: url('newimage.png')
}
However, this doesn't work with the nested elements. I am aware that this could be easily achieved with Javascript, but my requirements specify the use of only HTML & CSS.
If you have a better solution than the General Sibling Selector, please let me know.