Question

当鼠标悬停在div“man_1”中包含的动画上时，我试图使div“tile_1_text”中的文本淡入，然后一旦鼠标离开，图像就会淡出。这是一个网页设计课，我的教授希望我们使用jquery但从未在课堂上教过它。我尽可能多地阅读，但我的代码无效。任何帮助，将不胜感激！

HTML

<body>
<div id="tile_1">
    <div id="man_1"> </div>
    <div id="man_1_arms"> </div>
</div>

<div id="tile_1_text">
    <p>This is my last piece of leather.</p>
</div>
</body>

CSS

    body {
    background-image: url(../html%20files/background_image-01.jpg);
    background-repeat: repeat;
    font-family: "quicksand", "Arial", "Times New Roman";
    top: 79px;
    }

    #tile_1 {
    position: relative;
    margin: 0 auto 50px auto;
    width: 1024px;
    height: 768px; 
    background:url(tile%201/room-01.jpg);
    }

    #man_1 {
    background: url(tile%201/man_1.png);
    position: absolute;
    top: 161px;
    left: 145px;
    width: 175px;
    height: 591px;
    background-repeat: no-repeat;
    }

    #man_1_arms {
    background: url(tile%201/Man_1_arms-01.png);
    position: absolute;
    width: 276px;
    height: 326px;
    top: 203px;
    left: 87px;
    animation: right_arm_1 3s infinite alternate; transform: rotate(0deg);
    -webkit-animation: right_arm_1 2s infinite alternate; 
    }
    @font-face {
    font-family: quicksand;
    src:url(quicksand/Quicksand-Regular.otf)
    }

    @keyframes right_arm_1 {
    from {transform: rotate(0deg);}
    to {transform: rotate(15deg);}
    }

    @-webkit-keyframes right_arm_1 {
    from {transform: rotate(0deg);}
    to {transform: rotate(15deg);}
    }

    @-moz-keyframes right_arm_1 {
    from {transform: rotate(0deg);}
    to {transform: rotate(15deg);}
    }

    #tile_1_text {
    font-family:"quicksand", "Arial", "Times New Roman"; 
    font-size:45px;
    color:rgba(150,150,150,1.0);
    text-align: center;
    position: relative;
    display: none;
    }

jquery的

$(document).ready(function(){
$("#man_1").hover(function(){
        $(this).find("#tile_1_text").fadeIn(100);
}, function(){
        $(this).find("#tile_1_text").fadeOut(100)
});
   });

Answer 1

$(document).ready(function(){
$("#man_1").hover(function(){
        $(this).find("#tile_1_text").fadeIn(100);
}, function(){
        $(this).find("#tile_1_text").fadeOut(100)
});
   });

作为您的代码：当鼠标悬停在“＃man_1”上时，它会在“＃man_1”和FadeIn中找到“＃tile_1_text”。但根据您的HTML代码，“＃tile_1_text”不在“＃man_1”内。
您可以尝试以下代码：

$(document).ready(function(){
$("#man_1").hover(function(){
        $("#tile_1_text").fadeIn(100);
}, function(){
        $("#tile_1_text").fadeOut(100);
});
   });

Answer 2

$(document).ready(function(){
  $("#man_1").hover(function(){
       console.log("hey");
       $("#tile_1_text").fadeIn(100);
    }, function(){
       $("#tile_1_text").fadeOut(100);
    });
  })

Demo Fiddle

Jquery淡入淡出，鼠标悬停不起作用

2 个答案: