Question

嘿，我对General Sibling Selector有疑问。

首先来看看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;
 }

现在我的问题是，当我将鼠标悬停在示例图片1时，我如何将#bg背景图像设置为新的不带仅使用CSS的Javascript

通常我会这样：

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

但由于嵌套元素，这不起作用。我知道我可以使用Javascript轻松完成此操作，但我的要求只说HTML＆amp; CSS

如果你有更好的东西告诉我，它不一定是一般的兄弟选择器。

Answer 1

在给定当前结构的情况下，CSS无法实现。

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

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

如果不更改HTML结构，则需要使用javascript。

Answer 2

正如我在评论中写的，你当前的html结构是不可能的。根据规格：

一般兄弟组合器由“波浪号”（U + 007E，〜）组成分隔两个简单选择器序列的字符。该由两个序列表示的元素共享同一个父 文档树和第一个序列表示的元素先于（不一定是立即）由...表示的元素第二个。

但是使用以下html，您可以：

#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;
 }

.col:hover ~ #bg{
  background-image:url('https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97100&w=200&h=100')
}

<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 id="bg"></div><!-- move div here -->
  </div>
  
</div>

使用“通用同级选择器”导航通过嵌套元素

2 个答案: