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

Question

拜托，我希望我的 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>

Answer 1

hover()

Bind one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.

所以

$(...).hover(function(){
  // ...
},function(){
  // ...
})

等于

$(...).mouseenter(function(){
  // ...
}).mouseleave(function(){
  // ...
})

您已经为 mouseenter 设置了过渡，但没有为 mouseleave 设置。您还可以使用 .image 将事件绑定(bind)到 .one、.two 和 .three，例如以下片段。

var tex = ["photoshop", "javascript", "food blog"];
	
$(document).ready(function() {
  var text=$('.box p').text();
  
  $('.image').hover(function(){
    $('.box p').text(tex[0].toUpperCase());
    $('.box p').transition({ scale: [1.2] });
  },function(){
    $('.box p').text(text);
    $('.box p').transition({ scale: [1] });
  });
});

.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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="https://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.12/jquery.transit.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>