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

}

我不知道如何正确使用“这个”，但我在这里尝试过，因为它对我来说似乎是正确的，但也许我完全错了。我希望能够根据需要添加尽可能多的div，但不更改功能。目前，如果我在外部div的“鼠标中”，那么第一个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，以便在鼠标进入和离开时通过javascript触发div

添加类：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？