Hover over class affects another element

Issue

So I am trying to make it so if you hover over the wrapperleft class the background color of cardinfop1 changes, but it does not work for me. What am I doing wrong?

Code and fiddle below:

<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>

Here is a fiddle

Solution

There are two problems here:

1. You have to use the class selector: .wrapperleft
2. You are using ~ operator wrong

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.

I changed the order of #cardinfop1 and .wrapper elements, and it is working fine. Try the updated fiddle

Answered By - Kristijan Iliev