如何消除悬停闪烁?
how to remove blinking of hover?
我同时使用了 hover 和 mouseenter、mouseout,但两者的工作原理相同。
我怎样才能停止眨眼。
html
<div class="pro_img_border">
<div class="pro_img" id="pro_img_1">
</div>
<div class="pro_img-txt" id="img_1-komal">
hover text...
</div>
</div>
<div class="pro_img_border_1">
<div class="pro_img" id="pro_img_2">
</div>
<div class="pro_img-txt" id="img_2-komal">
hover text...
</div>
</div>`
css
.pro_img_border{
border: 1px dotted #000;
border-radius: 150px;
width: 221px;
height: 221px;
padding: 10px;
margin: 0px auto;
}
.pro_img{
z-index:0;
border-radius: 150px;
background-color: #cccccc;
width: 221px;
height: 221px;
margin: 0 auto;
position: absolute;
cursor: pointer;
}
.pro_img-txt{
border-radius: 150px;
background-color: rgba(202, 140, 140, 0.52);
width: 221px;
height: 221px;
margin: 0 auto;
position: absolute;
line-height: 19;
font-size: 20px;
color: rgba(1, 0, 0, 1);
display: none;
z-index:10;
}
jquery
$('.pro_img_border #pro_img_1').mouseenter(function(){
$( "#img_1-komal" ).show();
});
$('.pro_img_border #pro_img_1').mouseleave(function() {
$('#img_1-komal').hide();
});
$('.pro_img_border_1 #pro_img_2').hover(function(){
$( "#img_2-komal" ).show();
}, function() {
$('#img_2-komal').hide();
});
$('.pro_img_border').mouseenter(function(){
$( "#img_1-komal" ).show();
});
$('.pro_img_border').mouseleave(function() {
$('#img_1-komal').hide();
});
我同时使用了 hover 和 mouseenter、mouseout,但两者的工作原理相同。
我怎样才能停止眨眼。
html
<div class="pro_img_border">
<div class="pro_img" id="pro_img_1">
</div>
<div class="pro_img-txt" id="img_1-komal">
hover text...
</div>
</div>
<div class="pro_img_border_1">
<div class="pro_img" id="pro_img_2">
</div>
<div class="pro_img-txt" id="img_2-komal">
hover text...
</div>
</div>`
css
.pro_img_border{
border: 1px dotted #000;
border-radius: 150px;
width: 221px;
height: 221px;
padding: 10px;
margin: 0px auto;
}
.pro_img{
z-index:0;
border-radius: 150px;
background-color: #cccccc;
width: 221px;
height: 221px;
margin: 0 auto;
position: absolute;
cursor: pointer;
}
.pro_img-txt{
border-radius: 150px;
background-color: rgba(202, 140, 140, 0.52);
width: 221px;
height: 221px;
margin: 0 auto;
position: absolute;
line-height: 19;
font-size: 20px;
color: rgba(1, 0, 0, 1);
display: none;
z-index:10;
}
jquery
$('.pro_img_border #pro_img_1').mouseenter(function(){
$( "#img_1-komal" ).show();
});
$('.pro_img_border #pro_img_1').mouseleave(function() {
$('#img_1-komal').hide();
});
$('.pro_img_border_1 #pro_img_2').hover(function(){
$( "#img_2-komal" ).show();
}, function() {
$('#img_2-komal').hide();
});
$('.pro_img_border').mouseenter(function(){
$( "#img_1-komal" ).show();
});
$('.pro_img_border').mouseleave(function() {
$('#img_1-komal').hide();
});