不能同时放置超链接和一般兄弟组合器吗？

Question

嘿伙计们，我对 css 真的很陌生，所以我会尽力解释这一点。

我正在尝试创建一个图像超链接 .link，以便每当我将鼠标指针悬停在它上面时，.link 和 .picture 都会"更改"它们的图像。但我仍然希望超链接是可点击的。

.picture {
  background-image: url('imageB1.jpg');
  width: 100px;
  height: 100px;
}
.link {
  background-image: url('imageA1.jpg');
  width: 100px;
  height: 100px;
}
.link:hover {
  background-image: url('imageA2.jpg');
}
.link:hover+.picture {
  background-image: url('imageB2.jpg');
}

<a href="destination.html">
  <div class="link"></div>
</a>
<div class="picture"></div>

我的代码的问题在于，虽然 .link 可能是可点击的，但当我将鼠标悬停在 .link 上时，图片不会改变其背景图像。我希望有人能帮助我。提前感谢！

Answer 1

 Try this one 
 <a href="destination.html" >
 <div class="link">
  </div>
  </a>
  <div class="picture"></div>

 .picture {
 background-image: url('imageB1.jpg');
 width: 100px;
 height: 100px;
  display:none;
  }
.link {
background-image: url('imageA1.jpg');
width: 100px;
height: 100px;
display:block;
 }
 .link:hover {
  content: url('imageA2.jpg');
  }
   .link:hover+.picture {
   background-image: url('imageB2.jpg');
     }

Answer 2

我不确定是否可以从一个兄弟姐妹中选择一般兄弟姐妹组合，但您可以使用不同的方式进行。

将元素(a 和div(包装到另一个div 元素时，您可以选择选择父级是 .container 类的所有 .pictures 类

，如下所示。

.picture {
  background-image: url('DSC_0268.jpg');
  width: 100px;
  height: 100px;
}
.link {
  background-image: url('DSC_0268.jpg');
  width: 100px;
  height: 100px;
}
.link:hover {
  background-image: url('db 2 assignment schedule.png');
}
.container:hover > .picture {
  background-image: url('db 2 assignment schedule.png');
}
</style>
<div class="container">
<a href="destination.html">
  <div class="link"></div>
</a>
<div class="picture"></div>
</div>

查找可以在 CSS 中使用的选择器.css选择器

我认为这将满足您想要做的事情！