2

因此，当我将鼠标悬停在 div logo1上时，我试图使 div content1淡入，当我的鼠标不在 logo1 上时 content1 应该淡出哦，并且内容 div 具有可见性：隐藏在 css 上。logo2 3 和 4 也是如此

我已经尝试过这段代码，但它对我不起作用（我没有添加淡出，因为我使用淡入后不知道在哪里添加它）

$(document).ready(function(){ 
    $("logo1, logo2, logo3, logo4").one('mouseover', function(){
    $("logo1").fadeIn({"content1"}, "slow");
    $("logo2").fadeIn({"content2"}, "slow");
    $("logo3").fadeIn({"content3"}, "slow");
    $("logo4").fadeIn({"content4"}, "slow");
    $("content1, content2, content3, content4").mouseout('fadeout');
 });

我的代码有什么问题？有没有更简单的方法来做到这一点？可以用一个事件来完成吗？

编辑：

这是 HTML Tegeril

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<title>test</title>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/mouseover.js'></script>
</head>

<body>
    <div id="container">
        <div class="logo"></div>
        <div class="stripes"></div>
        <div class="button_info"></div>
        <div class="button_contact"></div>
        <div class="logo1"></div>
        <div class="logo2"></div>
        <div class="logo3"></div>
        <div class="logo4"></div>
        <div class="content1"></div>
        <div class="content2"></div>
        <div class="content3"></div>
        <div class="content4"></div>
    </div>
</body>
</html>

javascript位

$(document).ready(function(){ 

$(".logo1").hover(function() { 
    $(".content1").fadeIn("slow");
}, function() {
    $(".content1").fadeOut("slow");
});
$(".logo2").hover(function() { 
    $(".content2").fadeIn("slow");
}, function() {
    $(".content2").fadeOut("slow");
});
$(".logo3").hover(function() { 
    $(".content3").fadeIn("slow");
}, function() {
    $(".content3").fadeOut("slow");
});
$(".logo4").hover(function() { 
    $(".content4").fadeIn("slow");
}, function() {
    $(".content4").fadeOut("slow");
});
});

和CSS

body{
    margin: 0;
    padding: 0;
    text-align: center;
    background-image:url(../images/bg.png);
    background-repeat:repeat;
}

#container{
    background-image:url(../images/bg.png);
    text-align: left;
    margin: auto;
    width: 939px;
    height: 570px;
    top:41px;
    background-repeat:repeat;
    position:relative;
}

.logo{
    background-image:url(../images/logo.png);
    width: 345px;
    height: 82px;
    position:absolute;
}

.stripes{
    background-image:url(../images/stripes.png);
    background-repeat:repeat-x;
    width:939px;
    height:5px;
    position:absolute;
    top:97px;
    left:0px;
}

.button_info{
    background-image:url(../images/button_info.png);
    width: 98px;
    height: 31px;
    position:absolute;
    top:114px;
    left: 0px;
}

.button_contact{
    background-image:url(../images/button_contact.png);
    width: 211px;
    height: 35px;
    position:absolute;
    top:114px;
    right:0px;

}
.logo1{
    background-image:url(../images/logo_blue.png);
    background-repeat:repeat;
    width: 231px;
    height: 91px;
    position:absolute;
    bottom: 322px;

}
.logo2{
    background-image:url(../images/logo_green.png);
    width: 231px;
    height: 91px;
    position:absolute;
    bottom: 226px;

}
.logo3{
    background-image:url(../images/logo_yellow.png);
    width: 231px;
    height: 91px;
    position:absolute;
    bottom: 130px;
}
.logo4{
    background-image:url(../images/logo_red.png);
    width: 231px;
    height: 91px;
    position:absolute;
    bottom: 34px;

}

.content1{
    background-image:url(../images/logo_blue.png);
    width: 703px;
    height: 379px;
    position:absolute;
    left:236px;
    bottom:34px;
}
.content2{
    background-image:url(../images/logo_green.png);
    width: 703px;
    height: 379px;
    position:absolute;
    left:236px;
    bottom:34px;
}
.content3{
    background-image:url(../images/logo_yellow.png);
    width: 703px;
    height: 379px;
    position:absolute;
    left:236px;
    bottom:34px;

}
.content4{
    background-image:url(../images/logo_red.png);
    width: 703px;
    height: 379px;
    position:absolute;
    left:236px;
    bottom:34px;

}
4

3 回答 3

4

您可能正在寻找悬停功能。

 $(document).ready(function(){ 
     $("#logo1, #logo2, #logo3, #logo4").hover(function(){
              //perform fadeIn here
      }, function(){
           //perform fadeOut here
      });
  });
于 2009-12-16T01:39:46.030 回答
1

如果你有上面评论中解释的课程，你必须放一个“。” 在他们之前而不是#。# 表示身份，. 表示阶级。

$(document.ready(function() {
    $(".logo1, .logo2, .logo3, .logo4").hover(function() {
        var arrayOfClasses = $(this).attr('class').split(' '); 
        $(arrayOfClasses).each(function() {
            if (this.indexOf("logo" > -1) {
                $(".content" + this.slice(this.indexOf("logo") + 4)).fadeIn("slow");
            }
        });
    }, function() {
        var arrayOfClasses = $(this).attr('class').split(' ');
        $(arrayOfClasses).each(function() {
            if (this.indexOf("logo" > -1) {
                $(".content" + this.slice(this.indexOf("logo") + 4)).fadeOut("slow");
            }
        }); 
    });
});

绝对是代码复制，没有经过测试，但我认为这会做你想要的。在悬停这些项目中的任何一个时，它将获取有问题的项目，将该项目的类拆分为一个数组，遍历它以获得包含徽标的类，然后通过将数字从末尾切掉来淡入/淡出适当的编号内容徽标类名称。

根据以下评论进行编辑：

如果您希望它更简单，这将导致额外的代码复制，您只需要：

$(".logo1").hover(function() { 
    $(".content1").fadeIn("slow");
}, function() {
    $(".content1").fadeOut("slow");
});

...对于您的每个配对。当然，把它放在 $(document.ready(function() {...});

根据下面的第二条评论进行编辑：

好的，我刚刚通过在本地尝试所有文件进行了测试，问题不在于 JavaScript，而在于 CSS/HTML。尝试将此添加到您的CSS：

#container div {
    border: solid 1px #000000;
}

您会发现在 Safari 中，这些 div 不存在于任何地方，因为它们没有为 Webkit 正确定位，而在 Firefox 中，它们确实出现了。

您看到的“延迟”也可能是一个问题，其中所有具有类 content1-4 的 div 已经可见，并且在它们首先淡出然后重新进入之前您无法开始看到效果。您是想要将他们的 CSS 设置为显示：无；并且 JQuery 的淡入将使它们可见。

于 2009-12-16T02:53:31.623 回答
0

根据文森特的解释，我得到了这段代码

    $(document).ready(function(){ 
     $(".logo1, .logo2, .logo3, .logo4").hover(function(){
              //perform fadeIn here
            $('.content1').fadeIn("slow");
            $('.content2').fadeIn("slow");
            $('.content3').fadeIn("slow");
            $('.content4').fadeIn("slow");
      }, function(){
           //perform fadeOut here
            $('.content1').fadeOut("slow");
            $('.content2').fadeOut("slow");
            $('.content3').fadeOut("slow");
            $('.content4').fadeOut("slow");
      });
  });

但是，我看不到徽标上的悬停与每个内容的淡入和淡出之间有任何联系，如下所示：

当鼠标不在 logo1 上时 logo1 悬停淡入 content1 和淡出 content1

当鼠标不在 logo2 上时，logo2 悬停淡入内容 2 和淡出内容 2

当鼠标不在 logo3 上时，logo3 悬停淡入内容 3 和淡出内容 3

当鼠标不在 logo4 上时，logo4 悬停淡入内容 4 和淡出内容 4

于 2009-12-16T03:16:08.017 回答