悬停元素时如何将javascript链接到元素更改图片并显示第三个元素

Question

Hello guys i am trying to make something like a slider, i have 4 buttons which when pressed i want to change the main picture and show the content for each picture, after a bit of browsing and testing i managed the get the image to change on hover however i am having difficulty getting the content div to change i was trying to use the display none for the other content divs and block for the active one however i can't chain the whole thing, the best i could do was this

    $('#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");
   }
)

however only the .content.one changes and only when i move my mouse out. I hope i made my self clear my English is not that good if i can help clarify anything feel free to ask.

here is the whole java script

<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>

and the whole 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>

Answer 1

You are using .hover() incorrectly. Hover takes two functions as parameters: the function to execute on mouseover and the function to execute on mouseout. For example:

$(function() {

    $('#my-id').hover(

        // mouse over
        function() {
            $('#foo').show();
            $('#bar').addClass('baz');
        },

        // mouse out
        function() {
            $('#foo').hide();
            $('#bar').removeClass('baz');
        });
});

In your code you are passing four functions as parameters to the hover call bound to the element "ul li:nth-child(1)". In all of your other hover event handlers you are only passing one function.