CODEWITHSUNDEEP
htmlcsshover
evilgenious448
evilgenious448

Reputation: 528

Hover over class affects another element

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

Upvotes: 0

Views: 394

Answers (3)

rambo
rambo

Reputation: 36

You have added #wrapperLeft:hover, when wrapperLeft is a class. You have used ~ #cardinfop1 where cardinfop1 comes before any wrapperLeft class.

Now as for your requirement, there is no possible way to select a previous element in CSS based on the next element.

But there is one way to do it.

<div class="parent">

    <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>
    </div>
<style>
.parent{
    height:0px
}
.parent #cardinfop1 {
    background-color: white;
}
.parent:hover #cardinfop1 {
    background-color: green;
}
#cardinfop1:hover {
    background-color: white !important;
}
.parent > .wrapperleft:hover{
    background-color: pink;
}

.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;
}
</style>

Upvotes: 0

Monty
Monty

Reputation: 99

You're pretty close. The ~ is for a general successor sibling, meaning it will target a sibling after. Also, you were referencing #wrapperleft but you don't have any element with that as an ID attribute. It should be: .wrapperleft

Solution: place your cardinfop1 after the elements that initiate the hover:

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

And then fix your CSS as follows:

.wrapperleft:hover ~#cardinfop1 {
 background-color: green;
}

Here's a fiddle: http://jsfiddle.net/sjrmfv56/1/

You would need to fix your CSS positioning a bit though.

Upvotes: 1

Kristijan Iliev
Kristijan Iliev

Reputation: 4987

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

Upvotes: 1

Related Questions