JavaScript：“onmouseenter”-函数

Question

目前我正在自学一些 HTML、CSS 和 JavaScript。 我无法理解函数的使用。

我在另一个 div 中有一个 div style="display: none"。当用户用鼠标进入第一个 div 时，第一个 div 的“style.display”被设置为“block”。当他离开时，第二个 div 的“style.display”再次设置为“none”。 现在的问题是一个函数应该对所有这种类型的 div 执行此操作。 HTML 看起来像这样：

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

JavaScript 目前看起来是这样的：

function show(x){

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

}

我不知道如何正确使用“this”，但我在这里尝试过，因为它似乎对我来说是正确的，但也许我完全错了。我希望能够根据需要向表中添加尽可能多的 div，但不更改函数。目前，如果我在外部 div 中的任何一个上“mouseenter”，第一个 div 内部的唯一 div 会获得正确的“style.display”。

这个想法是朝着正确的方向发展还是我的方法是错误的？

Answer 1

this 在您的代码中是指点击的实际元素。所以它指的是.box 元素。

由于.expl 是.box 元素的后代，您可以通过x 在其中更深入地搜索，并找到相关的.expl 元素。

所以

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

---

工作示例

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

下面是一个函数，可用于您想在鼠标输入时显示或隐藏的任何元素。

只需添加类：triggerMouseHere 以使 div 在鼠标进入和离开时可由 javascript 触发

添加类：triggerChangeOnMouseEvent 使 div 在鼠标进入/离开父 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>

只是一个问题，你为什么不使用css来显示，隐藏child elements？