时间戳

首页 > 解决方案 > 通过每次悬停而不是使用 jquery 一次来传输元素

jquery - 通过每次悬停而不是使用 jquery 一次来传输元素

问题描述

请我希望我的 p 标签在我悬停在它上面的任何时候传输。我想将鼠标悬停在图像上，然后在使用比例转换的 div 标签上显示文本。请任何人都可以帮助我。我希望在我将鼠标悬停在图像上的任何时候都发生过渡，而不是使用 jquery/js 应用一次来更改文本。我的代码如下。

var tex = ["photoshop", "javascript", "food blog"];
	
$(document).ready(function() {
  var text=$('.box p').text();

  $('.one').hover(function() {
    $('.box p').text(tex[0].toUpperCase());
    $('.box p').transition({ scale: [1.2] });
  },function(){
    $('.box p').text(text);
  });

  $('.two').hover(function() {
    $('.box p').text(tex[1].toUpperCase()); 
    $('.box p').transition({ scale: [1.2] });
  },function(){
    $('.box p').text(text);        
  });

  $('.three').hover(function() {
    $('.box p').text(tex[2].toUpperCase()); 
    $('.box p').transition({ scale: [1.2] });
  },function(){
    $('.box p').text(text);        
  });
});
.image:hover {
  -webkit-filter: brightness(.5);
  filter: brightness(.5);
}

.image img {
  height: 200px;
}

* {
  margin:0;
  padding:0;
}

.box{
  width: 180px;
  height: 40px;
  margin:  100px auto;
  background-color: black;
}

.box p {
  line-height: 40px;
  text-align: center; 
  font-size: 1.5em;
  color: white;
  font-family: sans-serif;
  font-weight: bold;
  transform: scale(0.75);
  transition: transform 2s linear;
}

.container {
  text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <p></p>
</div>
<div class="container">
  <div class="row">
    <div class="col-lg-4">
      <div class="one image">
        <img src="https://images.unsplash.com/photo-1457464901128-7608dc7561ea?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8f43ead700f533404bd37bcbb5cfd679&auto=format&fit=crop&w=750&q=80">
      </div>
    </div>
    <div class="col-lg-4">
      <div class="two image">
        <img src="https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e3b92161cef01773ab8e0f83d4da1126&auto=format&fit=crop&w=750&q=80">
      </div>
    </div>
    <div class="col-lg-4">
      <div class="three image">
        <img src="https://images.unsplash.com/photo-1481487196290-c152efe083f5?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=527bc5d7e466efd5ce8a98c311728fbd&auto=format&fit=crop&w=830&q=80">
      </div>
    </div>
  </div>
</div>

标签： jqueryhtmlcsstwitter-bootstrap

解决方案

添加以下代码：

        $('.one, .two, .three').mouseout(function () {
            $('.box p').css("transform","");
        })

推荐阅读