Issue
I'm trying to make a connect 4 game. The functionality I'm trying to achieve is that a whole column of empty cells should be highlighted when the user hovers their mouse over any part of column that those cells belong to.
Here's how my HTML is set up:
<div class="board" id="board">
<div class="column" data-column>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
</div>
</div>
And here, the CSS:
.board {
display: grid;
grid-template-columns: repeat(7, auto);
justify-content: center;
background-color: blue;
border-radius: 3%;
margin: 0 auto;
justify-content: center;
}
.column:hover {
background: red
}
.cell {
border: 1px solid grey;
background-color: black;
width: 75px;
height: 75px;
border-radius: 50%;
outline: 2px solid black;
margin: 10px;
}
Currently, when I hover over the column, the background of the column is highlighted, but I want the background of all the cells in the column to be highlighted instead, and the column background not change.
How would I go about this?
Thanks!
Solution
Change the .column:hover rule so it selects the divs with the class .cell as follows:
.board {
display: grid;
grid-template-columns: repeat(7, auto);
justify-content: center;
background-color: blue;
border-radius: 3%;
margin: 0 auto;
justify-content: center;
}
.column:hover .cell {
background-color: red;
}
.cell {
border: 1px solid grey;
background-color: black;
width: 75px;
height: 75px;
border-radius: 50%;
outline: 2px solid black;
margin: 10px;
}
<div class="board" id="board">
<div class="column" data-column>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
</div>
</div>
Answered By - Adam
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.