javascript - 如何在鼠标悬停时创建 javascript 或 css fadeInDown？

Question

我想要创建的想法是:当我将鼠标悬停在这些 div 上时，我有一些 div 作为触发器，它们的数据将显示在特定的 div(右侧边框的 div)中，当我将鼠标移出时，默认数据会显示，并且每次都会有fadeInDown效果。这是我到目前为止所做的

<style type="text/css">
.content {
   margin-left: 200px;
   border: 1px solid;
   height : 0;
   opacity : 0;
   transition : opacity .3s ease, height .3s ease;
   -webkit-transition : opacity .3s ease, height .3s ease;
   -moz-transition : opacity .3s ease, height .3s ease;
   position: absolute;
}
.content.fade-in-down {
   opacity : 1;
   height : 100px;
}
.trigger {
   width: 100px;
   height: 100px;
   background-color: #333;
   margin-bottom: 20px;
}
</style>
<script>
  function show(id) {
        document.getElementById("default").classList.remove("fade-in-down");
        setTimeout(function(){ 
         var el = document.getElementById(id);
             el.classList.add("fade-in-down");
      }, 500);
  }
  function hide(id) {
        var el = document.getElementById(id);
            el.classList.remove("fade-in-down");
        setTimeout(function(){ 
            document.getElementById("default").classList.add("fade-in-down");
        }, 500);
  }

  window.onload = function(e) {
    var el = document.getElementById("default");
    el.classList.add("fade-in-down");
  };
</script>

<div style="display: block; width: 100%">
    <!--These Three div are the trigger-->
    <div style="float: left;">
        <div onMouseOver="show('div1');" onMouseOut="hide('div1')" class="trigger"></div>
        <div onMouseOver="show('div2');" onMouseOut="hide('div2')" class="trigger"></div>
        <div onMouseOver="show('div3');" onMouseOut="hide('div3')" class="trigger"></div>
    </div>
    <!--These are the data-->
    <div id="default" class="content" style="position: absolute;">This is default</div>
    <div id="div1" class="content">Div 1 Content</div>
    <div id="div2" class="content">Div 2 Content</div>
    <div id="div3" class="content">Div 3 Content</div>
</div>

现在的问题是:在有边框的 div 中，当我将鼠标悬停在 div1、div2 或 div3 上时，数据会显示，但之前的 div 数据也会显示，而且看起来很困惑。我使用了向下滑动，如果我可以使用 fadeInDown 效果而不是使用淡入淡出向下滑动会更好

Answer 1

我已更新您的示例以包含 ClearSelection 方法，每当触发 show 或 hide 方法时都会调用该方法。

html 已更改为包含 div 的 id 为“data”的包装。这样在调用ClearSelection方法时就可以查询子节点。

ClearSelection 方法循环遍历“data”div 中的所有子级，并删除“fade-in-down”类，确保只有一个 div 随时可见。

.content {
  margin-left: 200px;
  border: 1px solid;
  height: 0;
  opacity: 0;
  transition: opacity .3s ease, height .3s ease;
  -webkit-transition: opacity .3s ease, height .3s ease;
  -moz-transition: opacity .3s ease, height .3s ease;
  position: absolute;
}
.content.fade-in-down {
  opacity: 1;
  height: 100px;
}
.trigger {
  width: 100px;
  height: 100px;
  background-color: #333;
  margin-bottom: 20px;
}

<div style="display: block; width: 100%">
  <!--These Three div are the trigger-->
  <div style="float: left;">
    <div onMouseOver="show('div1');" onMouseOut="hide('div1')" class="trigger"></div>
    <div onMouseOver="show('div2');" onMouseOut="hide('div2')" class="trigger"></div>
    <div onMouseOver="show('div3');" onMouseOut="hide('div3')" class="trigger"></div>
  </div>
  <div id="data">
    <!--These are the data-->
    <div id="default" class="content" style="position: absolute;">This is default</div>
    <div id="div1" class="content">Div 1 Content</div>
    <div id="div2" class="content">Div 2 Content</div>
    <div id="div3" class="content">Div 3 Content</div>
  </div>
</div>

<script>
  function show(id) {
    document.getElementById("default").classList.remove("fade-in-down");
    setTimeout(function() {
      //Clear any prior selections.
      ClearSelection();
      var el = document.getElementById(id);
      el.classList.add("fade-in-down");
      var defaultEl = document.getElementById("default");
      //If the default element has a class of "fade-in-down", remove it.
      if (defaultEl.className.indexOf("fade-in-down") !== -1) {
        defaultEl.classList.remove("fade-in-down");
      }
    }, 500);
  }

  function hide(id) {
    var el = document.getElementById(id);
    el.classList.remove("fade-in-down");
    setTimeout(function() {
      //Clear any prior selections
      ClearSelection();
      //Find the default element.
      var defaultEl = document.getElementById("default");
      //If the default element doesn't have a class of "fade-in-down", add it.
      if (defaultEl.className.indexOf("fade-in-down") === -1) {
        defaultEl.classList.add("fade-in-down");
      }
    }, 500);
  }

  function ClearSelection() {
    var parent = document.getElementById('data');
    if (parent != null && parent.children.length > 0) {
      //Loop through all of the child nodes and remove the "fade-in-down" class.
      for (var i = 0; i < parent.children.length; i++) {
        document.getElementById(parent.children[i].id).classList.remove("fade-in-down");
      }
    }
  }

  window.onload = function(e) {
    var el = document.getElementById("default");
    el.classList.add("fade-in-down");
  };
</script>