Question

我正在试图制作一个悬浮功能并注视脸部。当我悬停在它上面它正常工作（ee消失），但当我徘徊时，visibilityshow类不显示（眼睛不再出现）

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Kow Your Face</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".lefteye").hover(function(){
    $(".lefteye").addClass("visibilityhidden");
    },function(){
    $(".lefteye").addClass("visibilityshow");
  });
});
</script>
</script>

<style>
.visibilityshow {
    visibility: visible;
    }
.visibilityhidden {
    visibility: hidden;
}
#face {
    background-image: url(face.png);
    width: 262px;
    height: 262px;
    }
.lefteye {
    background-image: url(circle.png);
    width: 28px;
    height: 28px;
    position: relative;
    top: 69px;
    left: 59px;
    }
.righteye {
    background-image: url(circle.png);
    width: 28px;
    height: 28px;
    position: relative;
    top: 41px;
    left: 167px;
    }
.mouth {
    background-image: url(circle.png);
    width: 28px;
    height: 28px;
    position: relative;
    top: 84px;
    left: 114px;
    }           
</style>
</head>

<body>
    <div id="face">
        <div class="lefteye">
        </div>
        <div class="righteye">
        </div>
        <div class="mouth">
        </div>
    </div>
    <div class="lefteyedes" style="display:none;">
    <p>Left Eye</p>
    </div>
    <div class="righteyedes" style="display:none;">
    <p>Right Eye</p>
    </div>
    <div class="mouthdes" style="display:none;">
    <p>Mouth</p>
    </div>
</body>
</html

＆GT;

Answer 1

您只需要在鼠标移除时删除该类，而不是添加另一个类

$(document).ready(function(){
  $(".lefteye").hover(function(){
    $(".lefteye").addClass("visibilityhidden");
    },function(){
    $(".lefteye").removeClass("visibilityhidden");
  });
});

即使很简单，你也可以切换课程

$(document).ready(function(){

  $(".lefteye").hover(function(){
    $(".lefteye").toggleClass("visibilityhidden");       
  });

});

Answer 2

您应该删除以前添加的类：

$(document).ready(function(){
    $(".lefteye").hover(function(){
        $(".lefteye").addClass("visibilityhidden");
        $(".lefteye").removeClass("visibilityshow");
    },function(){
        $(".lefteye").addClass("visibilityshow");
        $(".lefteye").removeClass("visibilityhidden");
      });
});

Jquery悬停功能无法正常工作

2 个答案: