Html Question posted in
Some basic documentation can be found here.

Html – Is there any way to show the buttons in a div during mouseover a div, and hide the buttons in a div during mouseout a div?

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?

Update: I’d clarify again more precisely what effect I want to achieve. When I move my mouse over the div, I want the text "a" to be hidden, showing up all the buttons and the text of the button inside the div, while turning the background color into light blue, and the text color into black. When I move away my mouse from the div, I want all the buttons and the text of the buttons in the div to be hidden, showing up again the text "a" only, while turning the bg color into black, and the text color into white.

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

2

Answers


  1. 0

    If your use case is to make the box white (invisible) during hover you can do it as:

    const a = document.getElementById("a");
const btns = document.querySelectorAll("#firstItem > .hoverable > button");

let btnsA = Array.from(btns);

a.addEventListener('mouseover', () => {
  btnsA.forEach((element) => {
element.style["display"] = "flex";
  });
});

a.addEventListener('mouseout', () => {
  btnsA.forEach((element) => {
element.style["display"] = "none";
  });
});
    * {
  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: repeat(8, 1fr);
}

#frame {
  width: 90%;
  height: 100%;
}

section #firstItem div {
  color: #FFFFFF;
  background-color: #000000;
  border: 0;
  text-align: center;
  transition: background-color 0.3s, color 0.3s;
}

section #firstItem div:hover {
  color: #FFFFFF;
  background-color: #FFFFFF;
  
}
    <section>
  <div id="firstItem">
<div id="a" class="hoverable">a</div>
<div id="b" class="hoverable">b</div>
<div id="c" class="hoverable">c</div>
<div id="d" class="hoverable">d</div>
<div id="e" class="hoverable">e</div>
<div id="f" class="hoverable">f</div>
<div id="g" class="hoverable">g</div>
<div id="h" class="hoverable">h</div>
  </div>
  <div id="frame"></div>
</section>
    Login or Signup to reply.
  2. 0

    You could create two div inside your div "a" , one for the text and one for the buttons and set the visibility of the sub-div on the main div mouse over.

    const a = document.getElementById("a");
const aText = document.getElementById("a-text");
const aButtons = document.getElementById("a-buttons");

a.addEventListener("mouseover", () => {
  a.style["color"] = "#56F1FF";
  aText.style["display"] = "none";
  aButtons.style["display"] = "flex";
});

a.addEventListener("mouseout", () => {
  aText.style["display"] = "flex";
  aButtons.style["display"] = "none";

  a.style["color"] = "#FFFFFF";
});

    and

    <section>
      <div id="firstItem">
        <div id="a">
          <div id="a-text">a</div>
          <div id="a-buttons">
            <button>a1</button>
            <button>a2</button>
            <button>a3</button>
            <button>a4</button>
            <button>a5</button>
            <button>a6</button>
          </div>
        </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>
</section>

    the buttons show on mouse over and text show otherwise

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search