Jquery 鼠标悬停事件(淡入和淡出)-6ren

Jquery 鼠标悬停事件(淡入和淡出)

转载作者：行者123 更新时间：2023-12-01 03:05:54

所以，当我将鼠标悬停在 div logo1 上时，我试图使 div content1 淡入，content1 应该淡出我的鼠标不在 logo1 上哦，内容 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;

}

最佳答案

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

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

关于Jquery 鼠标悬停事件(淡入和淡出)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1911719/

文章推荐： python - Sympy 旋转方向矩阵

文章推荐： javascript - Jquery，如何在不重写的情况下调用相同的函数

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

Jquery 鼠标悬停事件(淡入和淡出)