html - 使用通用同级选择器在嵌套元素中导航

Question

嘿，我有一个关于通用同级选择器的问题。

先看一下Html:

<div id="layout-middle">
 <div id="Center">
   <a class="col Picture1">Titel1</a>
   <a class="col Picture2">Titel2</a>
   <a class="col Picture3">Titel3</a>
   <a class="col Picture4">Titel4</a>
   <a class="col Picture5">Titel5</a>
   <a class="col Picture6">Titel6</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 只是所有元素后面的背景图像。

所有图片看起来像这样:

.Image1{
 background: url('Images/PictureXY.png') 0 0 no-repeat;
 }

现在我的问题是，当我将鼠标悬停在例如 picture1 上时，如何将 #bg 背景图像设置为一个新的没有 仅使用 CSS 的 Javascript

通常我会这样:

.col:hover ~ #bg{
  background-image:url('newimage.png')
}

但由于嵌套元素，这不起作用。 我知道我可以用 Javascript 轻松做到这一点，但我的要求只说 HTML 和 CSS

它不一定是通用兄弟选择器，如果您有更好的东西请告诉我。

Answer 1

鉴于当前结构，这对于 CSS 是不可能的。

.col 链接不是 #bg div 的同级或子级，因此没有可以应用的 CSS3 选择器。

唯一的选择是将#bg移到#Center div...然后一般的兄弟选择器将起作用。

在不改变 HTML 结构的情况下，您将需要 javascript。