拜托,我希望我的 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>
最佳答案
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>
关于jquery - 通过每次悬停而不是一次使用 jquery 来传递元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50075932/