jQuery禁用悬停效果onClick

Question

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

$(function(){



$('.tint.first').on('click', function() {
	$(this).toggleClass('clicked');
   
    
});


$('.tint.one').on('click', function() {
	$(this).toggleClass('clicked');
   
    
});


$('.tint.two').on('click', function() {
	$(this).toggleClass('clicked');
   
    
});
});

/* 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: 3.0rem;
    position:relative;
    z-index:100;
    color:black;
    font-weight:600;

  }
}

/* Bigger than 750 */
@media (min-width: 750px) {
  .hero {
    height: 190px;
  }
  .hero-heading {
    font-size: 3.2rem; z-index:100;color:black;
  }
  .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: 4rem; 
    z-index:100;color:black;
  }
  .phone {
    top: -16rem;
    max-height: 615px;
  }
  .phone + .phone {
    top: -14rem;
    max-height: 570px;
  }
}
/**********************************/
@media (max-width:1375px){
  .container .row .one-half.column.phones{
  
}

}

.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:150px;
  left:50px;
}
.tint img{
  height:500px;
  width:700px;
 
}
.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: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{
                /* Making images appear bigger and transparent on mouseover */
                cursor: pointer;
               transform:translateX(-30px);

      -webkit-transition: all 7s ease;
    -moz-transition: all 7s ease;
    -o-transition: all 7s ease;
    transition: all 7s ease;
  
     }
/*------------TINTS ON CLICK
-----------------------------------*/
     .tint.first.clicked{
      position:relative;
      top:-250px;
      left:-70%;

       z-index:100;
      box-shadow:none;
      background:transparent;
      width:140%;
      height:140%;
     -webkit-transform: rotate(360deg); /* Safari */
    transform: rotate(360deg);
    -webkit-transition:1.5s; 
 }
 .tint.first.clicked img{
  width:100%;
  height:100%;
 }

  .tint.first:hover.clicked img{
                /* Making images appear bigger and transparent on mouseover */
  transform:none;

     }

 /*************Background**/
.section.hero::after{ 
  content: "";
 background-image:url(../img/4.jpg);
opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section hero">
    <div class="container">
      <div class="row">
        <div class="one-half column">
          <h4 class="hero-heading">
            Start enjoying your Photographs Now.  From anywhere.
          </h4>
          <a class="button button-primary" href=""target="_blank">Try it</a>
        </div>

        <div class="one-half column phones">
          
         
            <div class="tint first">
           <img src="http://img1.wikia.nocookie.net/__cb20140410195944/pokemon/images/archive/f/fc/20150101093541!025Pikachu_OS_anime_5.png">
             </div>
           
          
        
        </div>
      </div>
    </div>
  </div>

为清楚起见，请打开我的codepen并按照以下说明操作：

1。）将鼠标悬停在图片上并观察翻译悬停效果和图片消失的色调。 （按预期工作）

2。）点击图片，点击后不要移动鼠标，观察图片如何成长为框架

3.。）重新点击图片或只是刷新页面以恢复正常尺寸，现在点击图片并立即将图片从图片上移到图片以外的任何地方。

4。）观察图片如何自动过渡到不增长的位置。

问题： 据我所知，这是因为“.tint.first：hover img”仍然有效，我猜测如果我点击图片就可以禁用它，那就没问题了。我该怎么做？

另外，如果有人能告诉我如何使图片响应，那就太好了。我担心位置：相对，顶部，左侧等在其他窗口上会是什么样的。

Answer 1

我建议您在.tint.first中添加CSS：将img悬停到类中，然后根据需要添加/删除该类。

在悬停时添加它，点击它检查它是否在元素上设置并删除它。 在mouseout上你再次在元素上设置它（下次你希望它增长）。

希望我很清楚。

此致 萨尔

Answer 2

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

工作答案。当鼠标进入区域时，添加css属性，当鼠标离开区域时，删除该css属性。

＆＃13;

＆＃13;

$(function(){



$('.tint.first').mouseenter(function() {
	$(this).addClass("me img");
   
    
});
$('.tint.first').mouseleave(function() {
	$(this).removeClass("me img");
   
    
});

$('.tint.first').on('click', function() {
	$(this).removeClass("me img");
  $(this).toggleClass('clicked');
   
    
});


$('.tint.two').on('click', function() {
	$(this).toggleClass('clicked');
   
    
});
});

＆＃13;

/* 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: 3.0rem;
    position:relative;
    z-index:100;
    color:black;
    font-weight:600;

  }
}

/* Bigger than 750 */
@media (min-width: 750px) {
  .hero {
    height: 190px;
  }
  .hero-heading {
    font-size: 3.2rem; z-index:100;color:black;
  }
  .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: 4rem; 
    z-index:100;color:black;
  }
  .phone {
    top: -16rem;
    max-height: 615px;
  }
  .phone + .phone {
    top: -14rem;
    max-height: 570px;
  }
}
/**********************************/
@media (max-width:1375px){
  .container .row .one-half.column.phones{
  
}

}

.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:150px;
  left:50px;
}
.tint img{
  height:500px;
  width:700px;
 
}
.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: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);

     }



 .me img{
                /* Making images appear bigger and transparent on mouseover */
                cursor: pointer;
               transform:translateX(-30px);

      -webkit-transition: all 7s ease;
    -moz-transition: all 7s ease;
    -o-transition: all 7s ease;
    transition: all 7s ease;
  
     }
/*------------TINTS ON CLICK
-----------------------------------*/
     .tint.first.clicked{
      position:relative;
      top:-250px;
      left:-70%;

       z-index:100;
      box-shadow:none;
      background:transparent;
      width:140%;
      height:140%;
     -webkit-transform: rotate(360deg); /* Safari */
    transform: rotate(360deg);
    -webkit-transition:1.5s; 
 }
 .tint.first.clicked img{
  width:100%;
  height:100%;
 }

  .tint.first:hover.clicked img{
                /* Making images appear bigger and transparent on mouseover */
  transform:none;

     }

 /*************Background**/
.section.hero::after{ 
  content: "";
 background-image:url(../img/4.jpg);
opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section hero">
    <div class="container">
      <div class="row">
        <div class="one-half column">
          <h4 class="hero-heading">
            Start enjoying your Photographs Now.  From anywhere.
          </h4>
          <a class="button button-primary" href=""target="_blank">Try it</a>
        </div>

        <div class="one-half column phones">
          
         
            <div class="tint first">
           <img src="http://img1.wikia.nocookie.net/__cb20140410195944/pokemon/images/archive/f/fc/20150101093541!025Pikachu_OS_anime_5.png">
             </div>
           
          
        
        </div>
      </div>
    </div>
  </div>

＆＃13;

＆＃13;

＆＃13;