CSS / Javascript：悬停后效果

Question

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

http://codepen.io/jzhang172/pen/YXoWZa

 $(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> 

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

我想做的是，一旦鼠标离开悬停区域，图片就会自动返回到其正常状态：着色且原始大小，没有过渡效果。

Answer 1

您可以在此处删除过渡：

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

JSFIDDLE演示