鼠标进入时切换内容

Question

我在 mouseenter 时尝试显示不同的内容。我当前的编码显示了我想在mouseenter时显示的内容，但它也保留了之前的内容。看看我的编码如下。如何切换这些内容？

＆＃13;

＆＃13;

$(document).ready(function() {
  $("#1").mouseenter(function() {
    $("#a1").show();
  });
  $("#2").mouseenter(function() {
    $("#a2").show();
  });
  $("#3").mouseenter(function() {
    $("#a3").show();
  });
});

＆＃13;

.content ul {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a id="1">number 1</a></li>
  <li><a id="2">number 2</a></li>
  <li><a id="3">number 3</a></li>
</ul>

<div class="content">
  <ul id="a1">
    // li statement
  </ul>
  <ul id="a2">
    // li statement
  </ul>
  <ul id="a3">
    // li statement
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我还没有得到完美的答案，虽然你已经解决了你的问题，但它会给你留下很多重复的代码。从快速播放http://codepen.io/graingeri/pen/mWyJNG之类的内容可能有所帮助。下面的代码相同：

$(document).ready(function(){
 $("li:nth-child(1)").mouseenter(function() {
  $("li:nth-child(2)").show();
 $("li:nth-child(1)").mouseleave(function() {
  $("li:nth-child(2)").hide();
  });
 });
});

li:nth-child(2) {
 display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
 <ul class="content">
  <li id="first">Test</li>
  <li>Hello</li>
 </ul>
</div>

Answer 2

您正在展示元素，但您永远不会隐藏任何元素。首先隐藏它们：

＆＃13;

＆＃13;

$(document).ready(function() {
  $("#1").mouseenter(function() {
    $('.content >ul').hide()
    $("#a1").show();
  });
  $("#2").mouseenter(function() {
    $('.content >ul').hide()
    $("#a2").show();
  });
  $("#3").mouseenter(function() {
    $('.content >ul').hide()
    $("#a3").show();
  });
});

＆＃13;

.content ul {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a id="1">number 1</a></li>
  <li><a id="2">number 2</a></li>
  <li><a id="3">number 3</a></li>
</ul>

<div class="content">
  <ul id="a1">
    // li statement 1
  </ul>
  <ul id="a2">
    // li statement 2
  </ul>
  <ul id="a3">
    // li statement 3
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

您可以进一步减少代码：

$(document).ready(function() {
  $("#1, #2, #3").mouseenter(function() {
    $('.content >ul').hide()
    $("#a" + this.id).show();
  });
});

＆＃13;

＆＃13;

$(document).ready(function() {
  $("#1, #2, #3").mouseenter(function() {
    $('.content >ul').hide()
    $("#a" + this.id).show();
  });
});

＆＃13;

.content ul {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a id="1">number 1</a></li>
  <li><a id="2">number 2</a></li>
  <li><a id="3">number 3</a></li>
</ul>

<div class="content">
  <ul id="a1">
    // li statement 1
  </ul>
  <ul id="a2">
    // li statement 2
  </ul>
  <ul id="a3">
    // li statement 3
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;