I’d like to ask is there a way to "hide" a div
while showing the button inside a div
when the mouse is over the div
, while "showing" the div
again without the buttons when the mouse is not over the div
?
const a = document.getElementById("a");
let btns = document.getElementsByTagName("#firstItem > .a > button");
let btnsA = Array.from(btns);
a.addEventListener('mouseover', () => {
btnsA.forEach((element) => {
element.style["display"] = "flex";
});
a.style["color"] = "#56F1FF";
});
a.addEventListener('mouseout', () => {
btnsA.forEach((element) => {
element.style["display"] = "none";
});
a.style["color"] = "#FFFFFF";
});
* {
height: 100%;
width: 100%;
box-sizing: border-box;
}
section {
display: flex;
}
#firstItem {
width: 10%;
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
}
#frame {
width: 90%;
height: 100%;
}
section #firstItem div {
color: #FFFFFF;
background-color: #000000;
border: 0;
text-align: center;
}
section #firstItem div:hover {
color: #000000;
background-color: #56F1FF;
}
section #firstItem #a {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
section #firstItem #a button {
display: none;
background-color: #56F1FF;
color: #000000;
}
<section>
<div id="firstItem">
<div id="a">a
<button>a1</button>
<button>a2</button>
<button>a3</button>
<button>a4</button>
<button>a5</button>
<button>a6</button>
</div>
<div class="b">b</div>
<div class="b">c</div>
<div class="b">d</div>
<div class="b">e</div>
<div class="b">f</div>
<div class="b">g</div>
<div class="b">h</div>
</div>
<div id="frame">
</div>
</section>
You need to sign in to view this answers