我试图让 div“tile_1_text”内的文本在鼠标悬停在 div“man_1”中包含的动画上时淡入，然后在鼠标离开时让图像淡出。这是一个网页设计类(class)，我的教授希望我们使用 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;
}
j查询
$(document).ready(function(){
$("#man_1").hover(function(){
$(this).find("#tile_1_text").fadeIn(100);
}, function(){
$(this).find("#tile_1_text").fadeOut(100)
});
});
最佳答案
$(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”和淡入中找到“#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);
});
});关于Jquery 淡入淡出鼠标悬停不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29113284/