JS + onmouseover + onmouseout

371

12 февраля 2017, 12:59

Вопрос по js.

jQuery(document).ready(function($){ 
    $('#fullpage').fullpage(); 
}); 
 
document.body.onmouseover = document.body.onmouseout = handler; 
 
function handler(event){ 
    if(event.type == "mouseover") 
    { 
        event.target.style.display = "none"; 
    } 
    if(event.type == "mouseout") 
    { 
        event.target.style.display = "block"; 
    } 
}

Сайт у меня разбит на секции. И при скролле сразу переходит на следующую секцию. На каждой секции есть div.mask который затемнен position: absolute; height,width: 100%; Нужно было сделать так, что при "активной" секции $('.mask') становится display:none.

Если в условие handler вместо объекта event поставить $('.mask'), перестает работать сама функция. Т. е. onmouse* не работает. Т.е. вот так: $('.mask').target.style.display = "none";

Как при hover-e на секцию сделать так, чтобы .mask исчезала? Причем в первой секции <header> она не работала?

Хочу добится вот такого эффекта: http://wearevisualanimals.com/ только без лишних плагинов и усложнений

Answer 1

А зачем вам такие усложнения с ховером? Если вы используете этот плагин 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>

Answer 2

С body ивент видет себя не предсказуемо. поэтому использовал document

jQuery(document).ready(function($){ 
    $('#fullpage').fullpage(); 
 
}); 
 
document.onmouseover = document.onmouseout = handler; 
 
function handler(event){ 
    if(event.type == "mouseover") 
    { 
        event.target.style.display = "none"; 
    } 
    if(event.type == "mouseout") 
    { 
        event.target.style.display = "block"; 
    } 
}

<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" style="background:red;width:50vw;height:50vh"></div>