0

大家好，我正在尝试制作类似滑块的东西，我有 4 个按钮，按下时我想更改主图片并显示每张图片的内容，经过一些浏览和测试后，我设法让图像更改悬停但是我很难让内容 div 改变我试图将显示 none 用于其他内容 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>
4

1 回答 1

1

您使用 .hover() 不正确。Hover 有两个函数作为参数：在 mouseover 时执行的函数和在 mouseout 时执行的函数。例如：

$(function() {

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

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

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

在您的代码中，您将四个函数作为参数传递给绑定到元素“ul li:nth-child(1)”的悬停调用。在所有其他悬停事件处理程序中，您只传递一个函数。

于 2013-09-21T06:31:59.943 回答