I'm using the following css with sass:
.cell:hover, .cell.x {
&::after, &::before {
position: absolute;
content: '';
width: 2rem;
height: 12rem;
}
&::after {
transform: rotate(45deg);
}
&::before {
transform: rotate(-45deg);
}
}
This code generate a X letter. When I put the class ".x" in any .cell it works perfectly and show the X letter on my div.
But if I put my mouse over the cell don't show the content, only if I put some content in the property: content: '.';
Does anyone know why it doesn't show blank content when hover is triggered using Sass?
HTML
<body>
<section >
<div id="0" ></div>
<div id="1" ></div>
<div id="2" ></div>
<div id="3" ></div>
<div id="4" ></div>
<div id="5" ></div>
<div id="6" ></div>
<div id="7" ></div>
<div id="8" ></div>
</section>
</body>
Sass
body {
height: 100vh;
width: 100vw;
background: blueviolet;
}
.board {
display: grid;
grid-template-columns: repeat(3, auto);
justify-content: center;
}
.cell {
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 12rem;
height: 12rem;
width: 12rem;
border: .6rem solid white;
cursor: pointer;
&:nth-child(-n 9) {
border-top: none;
border-left: none;
}
&:nth-child(n 7) {
border-bottom: none;
}
&:nth-child(n 7) {
border-bottom: none;
}
&:nth-child(3n 3) {
border-right: none;
}
}
.cell.x {
cursor: not-allowed;
&::after, &::before {
background-color: white;
}
}
.board.x {
.cell:not(.x):hover, .cell.x {
&::after, &::before {
position: absolute;
content: '';
width: calc(12rem * 0.2);
height: 12rem;
}
&::after {
transform: rotate(45deg);
}
&::before {
transform: rotate(-45deg);
}
}
}
CodePudding user response:
The problem is with missing background-color. You set it for .cell.x, but do not set it for hover states. So the X is there, it is just invisible.
.cell:hover, .cell.x {
&::after, &::before {
position: absolute;
content: '';
width: 2rem;
height: 12rem;
background-color: white; // <-- this thing
}
&::after {
transform: rotate(45deg);
}
&::before {
transform: rotate(-45deg);
}
}