Question

我同时使用了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();

        });

JSFIDDLE

Answer 1

$('.pro_img_border').mouseenter(function(){
            $( "#img_1-komal" ).show();


      });
      $('.pro_img_border').mouseleave(function() {
              $('#img_1-komal').hide();

    });

如何消除悬停的闪烁？

1 个答案: