JavaScript：“ onmouseenter”-功能

Question

I'm learning some HTML, CSS, and JavaScript on my own at the moment. I have some trouble understanding the use of a function.

I have a div style="display: none" inside of another div. The "style.display" of the first div is set to "block" when the user enters the first div with his mouse. When he leaves it the "style.display" of the second div is set to "none" again. Now the problem is that one function should do this to all of the divs of this kind. The HTML looks like that:

<table>
<tr>
  <td>
    <div class="box box2" onmouseenter="show(this)" onmouseleave="hide()">
      <b>HTML</b>

      <div class="expl expl2" style="display:none" id="test">
        <ul>
          <li><b>Software</b></li>
          <li><i>HTML</i></li>
          <li>HTML, CSS, JavaScript...</li>
        </ul>
      </div>

    </div>
  </td>
  <td>
    <div class="box box2" onmouseenter="show(this)" onmouseleave="hide2()">
      <b>HTML</b>

      <div class="expl expl2" style="display:none" id="test2">
        <ul>
          <li><b>Software</b></li>
          <li><i>CSS</i></li>
          <li>HTML, CSS, JavaScript...</li>
        </ul>
      </div>

    </div>
  </td>
</tr>
</table>

The JavaScript looks like that at the moment:

function show(x){

  x = document.querySelector('.expl').style.display ="block";

}

I have no idea of how to correctly use "this", but I tried it here, because it seemed to be right to me, but maybe I am completely wrong. I want to be able to add as many divs to the table as I want, but without changing the function. At the moment the only the div inside of the very first div gets the correct "style.display" if I "mouseenter" on EITHER of the outer divs.

Is that idea going into the right direction or is my approach wrong?

Answer 1

this in your code refers to the actual element from where the click originated. So it refers to the .box elements.

Since the .expl is a descendant of the .box element you can search deeper inside it, through the x , and find the relevant .expl element.

So

function show(x){ // x refers to the .box element that was clicked
  x.querySelector('.expl').style.display ="block";
}

---

Working example

 function show(x) { // x refers to the .box element that was clicked x.querySelector('.expl').style.display = "block"; } function hide(x) { // x refers to the .box element that was clicked x.querySelector('.expl').style.display = "none"; } 

 <table> <tr> <td> <div class="box box2" onmouseenter="show(this)" onmouseleave="hide(this)"> <b>HTML</b> <div class="expl expl2" style="display:none" id="test"> <ul> <li><b>Software</b></li> <li><i>HTML</i></li> <li>HTML, CSS, JavaScript...</li> </ul> </div> </div> </td> <td> <div class="box box2" onmouseenter="show(this)" onmouseleave="hide(this)"> <b>HTML</b> <div class="expl expl2" style="display:none" id="test2"> <ul> <li><b>Software</b></li> <li><i>CSS</i></li> <li>HTML, CSS, JavaScript...</li> </ul> </div> </div> </td> </tr> </table> 

Answer 2

Below is a function that can be used on any element that you want to show or hide on mouse enter.

Simply add the class: triggerMouseHere to make the div triggable by javascript when the mouse enters and leaves it

Add the class: triggerChangeOnMouseEvent to make the div visible/hidden when the mouse enters/leaves the parent div

 $(function() { $(".triggerMouseHere").on("mouseenter", function() { $(this).find(".triggerChangeOnMouseEvent").first().show(); }); $(".triggerMouseHere").on("mouseleave", function() { $(this).find(".triggerChangeOnMouseEvent").first().hide(); }); }); 

 .hidden{ display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td> <div class="box box2 triggerMouseHere"> <b>HTML</b> <div class="expl expl2 hidden triggerChangeOnMouseEvent" id="test"> <ul> <li><b>Software</b></li> <li><i>HTML</i></li> <li class="triggerMouseHere">HTML, CSS, JavaScript... <div class="expl expl2 hidden triggerChangeOnMouseEvent" id="test"> <ul> <li><b>Software</b></li> <li><i>HTML</i></li> <li class="triggerChangeOnMouseEvent">HTML, CSS, JavaScript... </li> </ul> </div> </li> </ul> </div> </div> </td> <td> <div class="box box2 triggerMouseHere"> <b>HTML</b> <div class="expl expl2 hidden triggerChangeOnMouseEvent" id="test2"> <ul> <li><b>Software</b></li> <li><i>CSS</i></li> <li>HTML, CSS, JavaScript...</li> </ul> </div> </div> </td> </tr> </table> 

Just a question, why don't you use css to show, hide the child elements ?