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数据也显示出来并且看起来很乱。我使用向下滑动它会更好，如果我可以使用淡入淡出效果而不是用淡入淡出滑落

Answer 1

我已更新您的示例以包含ClearSelection方法，只要触发show或hide方法，就会调用该方法。

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

ClearSelection方法遍历“数据”div中的所有子项，并删除“淡入淡出”类，确保只有一个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>

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

1 个答案: