А зачем вам такие усложнения с ховером? Если вы используете этот плагин http://alvarotrigo.com/fullPage, то можно обойтись вообще без дополнительных скриптов.
Активный слайд имеет класс active
. Если маска лежит прямо внутри слайда, то в css напишите:
.mask{
display:block;
}
.active .mask{
display:none;
}
Если нужна анимация:
.mask{
display:block;
pointer-events: none; /*чтобы маска не перехватывала клик*/
transition: opacity .5s ease-in-out;
}
.active .mask{
opacity: 0;
}
Рабочий пример
jQuery(document).ready(function($) {
$('#fullpage').fullpage();
});
.mask {
display: block;
pointer-events: none;
transition: opacity .5s ease-in-out;
background:#000;
position:absolute;
width:100%;
height:100%;
}
.active .mask {
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.fullpage/2.9.2/jquery.fullpage.extensions.min.js"></script>
<div id="fullpage">
<div class=section>
<div class=mask></div>PAGE1</div>
<div class=section>
<div class=mask></div>PAGE2</div>
</div>
Решение с hover
Если вы все-таки хотите убирать маску при наведении мыши, то это тоже легче сделать только на css:
.mask{
display:block;
}
.section:hover .mask{
display:none;
}
Пример с анимацией:
jQuery(document).ready(function($) {
$('#fullpage').fullpage();
});
.mask {
display: block;
pointer-events: none;
transition: opacity .5s ease-in-out;
background:#000;
position:absolute;
width:100%;
height:100%;
}
.section:hover .mask {
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.fullpage/2.9.2/jquery.fullpage.extensions.min.js"></script>
<div id="fullpage">
<div class=section>
<div class=mask></div>PAGE1</div>
<div class=section>
<div class=mask></div>PAGE2</div>
</div>
Всякое решение, использующее положение мыши, плохо тем, что когда курсор мыши уходит со страницы, то маска появляется снова, даже на активном слайде.
Решение на JavaScript
Ну и еще один пример, для ознакомления, как это сделать все-таки на JS:
jQuery(document).ready(function($) {
$('#fullpage').fullpage();
$('#fullpage .section').hover(function(){
$(this).find('.mask').fadeToggle()
})
});
.mask {
display: block;
pointer-events: none;
background:#000;
position:absolute;
width:100%;
height:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.fullpage/2.9.2/jquery.fullpage.extensions.min.js"></script>
<div id="fullpage">
<div class=section>
<div class=mask></div>PAGE1</div>
<div class=section>
<div class=mask></div>PAGE2</div>
</div>