Question

所以当我用鼠标滑过div logo1 时，我正试图让div content1 fadein， content1 应该淡出时我的鼠标还没有结束 logo1 哦，内容div的可见性：隐藏在CSS上。 logo2 3和4也是如此

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

$(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;

}

Answer 1

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

 $(document).ready(function(){ 
     $("#logo1, #logo2, #logo3, #logo4").hover(function(){
              //perform fadeIn here
      }, function(){
           //perform fadeOut here
      });
  });

Answer 2

如果你有上述评论中解释的课程，你必须加上'。'在他们之前而不是＃。＃表示id ,.表示上课。

$(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中，它们确实出现了。

你所看到的“延迟”也可能是一个问题，其中所有具有类内容1-4的div已经可见，并且在它们首次淡出然后重新进入之前你无法开始看到效果。你想将他们的CSS设置为display：none;和JQuery的fadeIn将使它们可见。

Answer 3

根据vincent的解释，我有这个代码

    $(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悬停fadein content1和fadeout content1

当鼠标不在logo2上时，

logo2悬停fadein content2和fadeout content2

当鼠标不在logo3上时，

logo3悬停fadein content3和fadeout content3

当鼠标不在logo4上时，

logo4悬停fadein content4和fadeout content4

Jquery鼠标鼠标悬停一个事件（fadein和fadeout）

3 个答案: