html - 将鼠标悬停在类上会影响另一个元素

Question

所以我试图做到这一点，如果您将鼠标悬停在 wrapperleft 类上，cardinfop1 的背景颜色会发生变化，但它对我不起作用。我做错了什么？

下面的代码和 fiddle :

<div id="cardinfop1">
    <div class="cardtitle">Fire Ship</div>
    <img class="cardimage" src="assets/fireshipcard.svg" />
    <div class="carddescription">This card costs 3 gunpowder to use and will deal 5 damage to your opponent.</div>
</div>  


<div id="player1card1wrapper" class="wrapper wrapperleft"><img id="player1card1" class="card player1card"/></div>
<div id="player1card2wrapper" class="wrapper wrapperleft"><img id="player1card2" class="card player1card"/></div>
<div id="player1card3wrapper" class="wrapper wrapperleft"><img id="player1card3" class="card player1card"/></div>
<div id="player1card4wrapper" class="wrapper wrapperleft"><img id="player1card4" class="card player1card"/></div>
<div id="player1card5wrapper" class="wrapper wrapperleft"><img id="player1card5" class="card player1card"/></div>
<div id="player1card6wrapper" class="wrapper wrapperleft"><img id="player1card6" class="card player1card"/></div>
<div id="player1card7wrapper" class="wrapper wrapperleft"><img id="player1card7" class="card player1card"/></div>
<div id="player1card8wrapper" class="wrapper wrapperleft"><img id="player1card8" class="card player1card"/></div>


<style>
.wrapper {
    width: 90px;
    height: 123.75px;
    margin-top: 15px;
    background-color: pink;
}

.wrapperleft {
    float: left;
    margin-left: 18px;
 }

#cardinfop1 {
    width: 350px;
    height: 250px;
    background-color: white;
    margin-left: 126.62px;
}

#wrapperleft:hover ~ #cardinfop1 {
    background-color: green;
}
</style>

这是一个fiddle

Answer 1

这里有两个问题:

1. 你必须使用类选择器:.wrapperleft
2. 您使用的 ~ 运算符有误

The general sibling combinator is made of the "tilde" (U+007E, ~) character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one.

我更改了 #cardinfop1 和 .wrapper 元素的顺序，它工作正常。试试 updated fiddle