Анимация при наведении на ссылки

235

13 апреля 2018, 13:40

Есть страница с 3 блоками. При ховере на каждый блок происходит анимация — изменение цвета бэкграунда и анимация текста(пример, блок 1). В header есть 2 ссылки: Logo, Link. При наведении на них, пропадает анимация блоков, состояние блока возвращается к первоначальному состоянию.

Возможно ли, как-то при наведении на эти ссылки сохранять состояние анимации в наведенном блоке? Спасает pointer-events: none на ссылках в хедере. Происходит то, что нужно, но тогда невозможно перейти по ссылкам.

Answer 1

Мое решение на jquery. Я прокомментировал все этапы. Удобнее и понятнее смотреть в развернутом окне. Сам эффект наведения работает за счет добавления/удаления класса у анимируемого блока. Структура html может быть значительно сложней.

$(function() { 
  // В переменную $item записываем блоки для которых будем имитировать hover 
  var $item = $(".item"); 
 
   
  // В переменную classActive записываем класс 
  // который мы будем добавлять/удалять  
  // у наших блоков, вместо hover 
  var classActive = "item_hov"; 
 
  // На шапку вешаем событие mousemove,  
  // то есть будем следить за курсоров внутри header 
  $(".header").on("mousemove", function(e) { 
    // Когда курсор внутри header, проходим циклом 
    // по всем отслеживаемым блокам 
    // и сравниваем координаты крайних точек каждого 
    // с координатыми курсора 
    for (var i = 0; i < $item.length; i++) { 
      var left = $item.eq(i).offset().left; 
      var right = left + $item.eq(i).width(); 
      var top = $item.eq(i).offset().top; 
      var bottom = top + $item.eq(i).height(); 
      if ( 
        event.pageX >= left && 
        event.pageX <= right && 
        event.pageY >= top && 
        event.pageY <= bottom 
      ) { 
        // Если координаты курсора внутри 
        // в пределах координат сравниваемого блока 
        // то добавляем этому блоку класс 
        // записаный в переменную classActive 
        $item.eq(i).addClass(classActive); 
        //И выходим из цикла 
        break; 
      } else { 
        // Иначе удаляем у всех блоков classActive 
        $item.removeClass(classActive); 
      } 
    } 
  }); 
 
  // Если мы уводим курсор с header 
  // удаляем у всех блоков класс 
  // записаный в переменную classActive 
  $(".header").on("mouseout", function(e) { 
    $item.removeClass(classActive); 
  }); 
 
  // Добавляем блоку на который навели курсор 
  // класс записаный в переменную classActive 
  $item.mouseenter(function() { 
    $(this).addClass(classActive); 
  }); 
 
  // Удаляем блоку м которого увели курсор 
  // класс записаный в переменную classActive 
 
  $item.mouseleave(function() { 
    $(this).removeClass(classActive); 
  }); 
});

.header { 
  height: 100px; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  position: fixed; 
  left: 0; 
  right: 0; 
  top: 0; 
  background-color: rgb(0, 0,0, 0.5); 
} 
 
.header a { 
  display: inline-block; 
  padding: 20px; 
  background-color: #ccc; 
  text-decoration: none; 
} 
 
.container { 
    display: flex; 
  justify-content: space-between; 
  height: 500px; 
} 
 
.item { 
  width: 30%; 
  background-color: green; 
} 
 
.item_hov { 
   background-color: red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="header"> 
  <a href="#">Ссылка 1</a> 
  <a href="">Ссылка 2</a> 
</div> 
 
<div class="container"> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
</div>

Answer 2

Вот нажмите на Выполнить код и посмотрите ... у меня работает анимация ...и даже при наведении на ссылки ....

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

.items{ 
  display:flex; 
  height:100vh; 
} 
.item{ 
  width:100%; 
  background:red; 
} 
.item:nth-child(2){ 
  border-left:1px solid #fbfbfb; 
  border-right:1px solid #fbfbfb; 
  transition:all .4s linear; 
} 
.item:hover{ 
  background:blue; 
} 
a{ 
  font-size:2em; 
  color:#fff; 
}

<div class="items"> 
  <div class="item"> 
    <a href="#">logo</a> 
  </div> 
  <div class="item"></div> 
  <div class="item"> 
    <a href="#">link</a> 
  </div> 
</div>