Question

我目前正致力于家族企业网站的推荐。我正在努力使其正确。当您将鼠标悬停在信封上时，应该将信封向上移动，而不是所有信封。我也有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});

});
});

Answer 1

鼠标悬停时，您正在更改所有类，而不是在父类中找到的类。解决方案是使用.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
        });

    });
});

用css和jquery动画的信封

1 个答案: