Question

我想要创建的是，只要您的鼠标离开悬停区域，图片就会恢复正常。例如，在此代码中：

$(function() {

  var aud = document.getElementById("audio");
  aud.volume = 0.01;



  $("i").click(function() {
    var elementheight = document.querySelector(".overlay").offsetHeight;
    console.log(elementheight);
    if (elementheight == 430) {

      $("p.more").fadeToggle("slow");

      $(".overlay").animate({

        height: "-=50"
      }, 800);

    } else {
      $(".overlay").animate({

        height: "+=50"
      }, 800);
      setTimeout(function() {
        $("p.more").fadeToggle("slow");
      }, 1000);

    }
  }); //End .click


  //Check if element exists
  /*if ($('.overlay').length > 0) {
    console.log(".overlay".length);
  }*/
});

/* Shared
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.button {
  border-radius: 100px;
}
/* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.section {
  padding: 8rem 0 7rem;
  text-align: center;
}
.section-heading,
.section-description {
  margin-bottom: 1.2rem;
}
/* Hero
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.phones {
  position: relative;
}
.phone {
  position: relative;
  max-width: 80%;
  margin: 3rem auto -12rem;
}
.phone + .phone {
  display: none;
}
/* Values
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.values {
  background-image: url('../img/values-bg.jpg');
  background-size: cover;
  color: #fff;
  padding-bottom: 5rem;
}
.value-multiplier {
  margin-bottom: .5rem;
  color: #11DFC7;
}
.value-heading {
  margin-bottom: .3rem;
}
.value-description {
  opacity: .8;
  font-weight: 300;
}
/* Help
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.get-help {
  border-bottom: 1px solid #ddd;
}
/* Categories
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.categories {
  background-image: url('../img/values-bg.jpg');
  background-size: cover;
  color: #fff;
}
.categories .section-description {
  margin-bottom: 4rem;
}
/* Bigger than 550 */

@media (min-width: 550px) {
  .section {
    padding: 12rem 0 11rem;
  }
  .hero {
    padding-bottom: 12rem;
    text-align: left;
    height: 165px;
  }
  .phone {
    position: absolute;
    top: -7rem;
    right: 3rem;
    max-height: 362px;
    z-index: 3;
  }
  .phone + .phone {
    top: -6rem;
    display: block;
    max-width: 73.8%;
    right: 0;
    z-index: 2;
    max-height: 338px;
  }
  .hero-heading {
    font-size: 2.4rem;
    z-index: 100;
  }
}
/* Bigger than 750 */

@media (min-width: 750px) {
  .hero {
    height: 190px;
  }
  .hero-heading {
    font-size: 2.6rem;
    z-index: 100;
  }
  .section {
    padding: 14rem 0 15rem;
  }
  .hero {
    padding: 16rem 0 14rem;
  }
  .section-description {
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
  }
  .phone {
    top: -14rem;
    right: 5rem;
    max-height: 510px;
  }
  .phone + .phone {
    top: -12rem;
    max-height: 472px;
  }
  .categories {
    padding: 15rem 0 8rem;
  }
}
/* Bigger than 1000 */

@media (min-width: 1000px) {
  .section {
    padding: 20rem 0 19rem;
  }
  .hero {
    padding: 22rem 0;
  }
  .hero-heading {
    font-size: 3.0rem;
    z-index: 100;
  }
  .phone {
    top: -16rem;
    max-height: 615px;
  }
  .phone + .phone {
    top: -14rem;
    max-height: 570px;
  }
}
.container .row .one-half.column.phones {
  width: 700px;
  margin-left: 350px;
  margin-top: -100px;
}
.tint.two {
  position: absolute;
  left: 110px;
  top: -250px;
  z-index: 1;
}
.tint {
  position: relative;
  width: 500px;
  height: 400px;
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, .2) 3px 5px 5px;
  overflow: hidden;
  z-index: 6;
}
.tint.first {
  position: relative;
  bottom: 100px;
  left: 50px;
}
.tint img {
  height: 100%;
  width: 100%;
  transition: all 1s ease;
}
.tint:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(210, 232, 232, 0.24);
  transition: all .3s linear;
}
.tint.one {
  position: absolute;
  right: -100px;
  top: -200px;
  z-index: 5;
  overflow: hidden;
}
.tint.one img {
  left: -50px;
  width: 600px;
}
.tint.one:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(210, 232, 232, 0.24);
  transition: all .3s linear;
}
.tint:hover:before,
.tint.one:hover:before,
.tint.two:hover:before {
  background: none;
  transform: scale(1.0);
  -ms-transform: scale(1.0);
  -moz-transform: scale(1.0);
  -webkit-transform: scale(1.0);
  -o-transform: scale(1.0);
}
.tint.first:hover img,
.tint.one:hover img,
.tint.two:hover img {
  /* Making images appear bigger and transparent on mouseover */
  cursor: pointer;
  transform: scale(1.1);
  -ms-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

<div class="one-half column phones">

  <a href="">
    <div class="tint first">
      <img src="http://img3.wikia.nocookie.net/__cb20140410195936/pokemon/images/archive/e/e1/20150101093317!025Pikachu_OS_anime_4.png">
    </div>
  </a>
  <a href="">
    <div class="tint one">
      <img src="http://cdn.bulbagarden.net/upload/thumb/f/fb/143Snorlax.png/250px-143Snorlax.png">
    </div>
  </a>

  <a href="">
    <div class="tint two">
      <img src="img/3.jpg">
    </div>
  </a>
</div>
</div>
</div>
</div>

当您将鼠标悬停在图片上时，它会按预期工作，现在当您的鼠标离开悬停区域时，图片会慢慢缩放，然后色调会重新出现。

我想要做的是，只要鼠标离开悬停区域，图片就会自动恢复到正常状态：tintted和原始尺寸，没有转换效果。

Answer 1

您可以在此处删除转换：

.tint img{
  height:100%;
  width:100%;
  /* transition: all 1s ease; */
}

<强> JSFIDDLE DEMO

CSS / Javascript：悬停效果后

1 个答案: