我目前正在为家族企业网站撰写推荐信。我正在努力使它正确。当您将鼠标悬停在信封上时，应该向上移动信封，而不是向上移动所有信封。而且我对IE也有问题，即使在新版本的IE信封中也不可见。我不知道为什么？
链接到演示：http://fhukm.pl/testimonials1.html
的HTML：
<!DOCTYPE html>
<html>
<head>
<link href="style2.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/modernizr.custom.33897.js"></script>
<script type="text/javascript" src="js/js1.js"></script>
</head>
<body>
<ul id="testimo">
<li class="envelope">
<div class="list">
<blockquote>XXXXXXXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXX XXXXXXXX XXXXXX</blockquote>
</div>
</li>
<li class="envelope">
<div class="list">
<blockquote>XXXXXXXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXX XXXXXXXX XXXXXX</blockquote>
</div>
</li>
<li class="envelope">
<div class="list">
<blockquote>XXXXXXXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXX XXXXXXXX XXXXXX</blockquote>
</div>
</li>
<li class="envelope">
<div class="list">
<blockquote>XXXXXXXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXX XXXXXXXX XXXXXX</blockquote>
</div>
</li>
</ul>
</body>
</html>
CSS：
#testimo li {
margin-bottom:40px;
}
#testimo li p {
color:#666;
margin-top:5px;
font-size:18px;
}
.hh2 p {
font-family:"Segoe Print";
font-size:17px !important;
}
.envelope {
width:300px;
height:150px;
position:relative;
padding: 120px 24px 0;
overflow: hidden;
float: left;
-webkit-transition:1s;
transition:1s;
}
.list {
width:240px;
height:150px;
background:white;
-moz-box-shadow: inset 0 0 5px #888, 0 0 10px #888;
-webkit-box-shadow: inset 0 0 5px #888, 0 0 10px #888;
box-shadow: inset 0 0 5px #888, 0 2px 8px #888;
padding: 30px 20px 0;
font-size: 16px;
-webkit-transition:1s;
position:absolute;
top:100px;
left:30px;
z-index:2;
-webkit-transition:0.8s;
transition:0.8s;
}
.envtop {
position:absolute;
top:20px;
z-index:1;
-webkit-transition:0.8s;
transition:0.8s;
}
.envbot {
position:absolute;
top:20px;
z-index:3;
-webkit-transition:0.8s;
transition:0.8s;
}
.envani {
-ms-transform:rotate(4deg);
-webkit-transform:rotate(4deg);
transform:rotate(4deg);
top:0px;
}
.listani {
top:60px;
}
.envshadow {
position: absolute;
bottom:0;
z-index: 4;
left: 0;
}
.gray .envtop, .gray .envbot {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: gray;
-webkit-filter: grayscale(100%);
}
Javascript：
$(document).ready(function() {
$('<img class="envtop" src="images/envtop.jpg" alt="Otwarta koperta."/>').prependTo('#testimo li');
$('<img class="envbot" src="images/envbot.png" alt=" "/>').appendTo('#testimo li');
$('<img class="envshadow" src="images/shadow.png" alt=" "/>').appendTo('#testimo li');
$("#testimo :nth-child(4n+1)").addClass('gray');
$('.envelope').mouseover(function() {
$('.envtop').addClass('envani');
$('.envbot').addClass('envani');
$('.list').addClass('listani');
});
$(".envelope").mouseout(function() {
$('.envtop').removeClass('envani');
$('.envbot').removeClass('envani');
$('.list').removeClass('listani');
});
$('.envelope').click(function() {
$('.list')
.css({top: 0})
.delay(2000)
.css({opacity: 0});
});
});
最佳答案
鼠标悬停时，您将更改所有类，而不是父类中找到的类。解决方案将使用.find()
$(document).ready(function () {
$('').prependTo('#testimo li');
$('').appendTo('#testimo li');
$('').appendTo('#testimo li');
$("#testimo :nth-child(4n+1)").addClass('gray');
$('.envelope').mouseover(function () {
$(this).find('.envtop').addClass('envani')
.end().find('.envbot').addClass('envani')
// .end() will return the selection to the first selector, in this case $(this)
.end().find('.list').addClass('listani');
});
$(".envelope").mouseout(function () {
$(this).find('.envtop').removeClass('envani')
.end().find('.envbot').removeClass('envani')
.end().find('.list').removeClass('listani');
});
$('.envelope').click(function () {
$(this).find('.list')
.css({
top: 0
})
.delay(2000)
.css({
opacity: 0
});
});
});
关于jquery - css和jquery的动画信封，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16800455/