2014-10-13 2 views
0

Я пытаюсь сделать функцию зависания и смотреть на лицо. Когда я парить над ней работает должным образом (ЭИ исчезает), но когда я зависать из класса visibilityshow не отображается (глаз не появляется)Функция зависания JQuery не работает, не работая с зависанием

<!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 

>

ответ

1

Вам просто нужно удалить класс курсора мыши, чтобы не добавить еще один класс

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

Даже простое, вы можете просто переключить класс

$(document).ready(function(){ 

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

}); 
+0

Спасибо за помощь! –

0

Возможно, вы должны удалить ранее добавленный класс:

$(document).ready(function(){ 
    $(".lefteye").hover(function(){ 
     $(".lefteye").addClass("visibilityhidden"); 
     $(".lefteye").removeClass("visibilityshow"); 
    },function(){ 
     $(".lefteye").addClass("visibilityshow"); 
     $(".lefteye").removeClass("visibilityhidden"); 
     }); 
}); 
Смежные вопросы