javascript - 要素をホバリングして要素の画像を変更し、ブロックの3番目の要素を表示するときにjavascriptをチェーンする方法

Question

こんにちは、スライダーのようなものを作ろうとしています。4 つのボタンがあり、押すとメイン画像を変更し、各画像のコンテンツを表示します。少しブラウズしてテストした後、画像を変更することができました。ホバーしますが、コンテンツ div を変更するのに苦労しています。他のコンテンツ div には表示なしを使用し、アクティブな div にはブロックを使用しようとしましたが、すべてをチェーンすることはできません。私ができる最善のことはこれでした

    $('#changeImage').attr('src', 'pic1.png');
  },
       function() {
    $(".content.one").css("display", "block");
   },
        function() {
    $(".content.two").css("display", "none");
   },
        function() {
    $(".content.three").css("display", "none");
   },
        function() {
    $(".content.four").css("display", "none");
   }
)

ただし、.content.one のみが変更され、マウスを離したときにのみ変更されます。私は自分の英語がそれほど上手ではないことを明確にしたことを願っています。

ここにJavaスクリプト全体があります

<script type="text/javascript">
$(document).ready(function() {
    $("ul li:nth-child(1)").hover(
  function () {     
    $('#changeImage').attr('src', 'pic1.png');
  },
       function() {
    $(".content.one").css("display", "block");
   },
        function() {
    $(".content.two").css("display", "none");
   },
        function() {
    $(".content.three").css("display", "none");
   },
        function() {
    $(".content.four").css("display", "none");
   }
);

$("ul li:nth-child(2)").hover(
  function () {     
    $('#changeImage').attr('src', 'pic2.png');
  }
);

$("ul li:nth-child(3)").hover(
  function () {     
    $('#changeImage').attr('src', 'pic3.png');
  }
);

$("ul li:nth-child(4)").hover(
  function () {     
    $('#changeImage').attr('src', 'pic4.png');
  },
     function() {
    $(".content.one").css("display", "none");
   },
        function() {
    $(".content.two").css("display", "none");
   },
        function() {
    $(".content.three").css("display", "none");
   },
        function() {
    $(".content.four").css("display", "block");
   }
);

});
</script>

そしてhtml全体

<div id="wrapper">
<img src="clear.png">
<ul id="side-bar">
<li class="one"><a href="#"><img src="1-1.png"
onmouseover="this.src='1-2.png'"
onmouseout="this.src='1-1.png'"></a></li>
<li class="two"><a href="#"><img src="2-2.png"></a></li>
<li class="three"><a href="#"><img src="3-1.png"
onmouseover="this.src='3-2.png'"
onmouseout="this.src='3-1.png'"></a></li>
<li class="four"><a href="#"><img src="4-1.png"
onmouseover="this.src='4-2.png'"
onmouseout="this.src='4-1.png'"></a></li>
</ul>
<div id="image"><img id="changeImage" src="pic1.png"></div>
<div id="content-wrapper"><img src="content.png"></div>
<div class="content one"><p>content 1</p><a href="#" class="more">read more...</a></div>

<div class="content two"><p>content 2</p><a href="#" class="more">read more...</a></div>

<div class="content three"><p>content 3</p><a href="#" class="more">read more...</a></div>

<div class="content four"><p>content 4</p><a href="#" class="more">read more...</a></div>
</div>