JavaScript:“onmouseenter” - 功能

时间:2017-12-20 14:42:32

标签: javascript html

我现在正在学习一些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”。

这个想法是朝着正确的方向发展还是我的做法错了?

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:-1)

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

只需添加类: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