При наведении курсора на пункт меню анимировать все остальные элементы, а не первый? - PullRequest
Новая
       26

При наведении курсора на пункт меню анимировать все остальные элементы, а не первый?

1 голос
/ 02 июля 2019

Использование jQuery или CSS или их комбинации для анимации при наведении на пункт меню.

Мне нужна помощь с пунктами меню.Например, при наведении мыши на один из пунктов меню все остальные элементы меню получают анимацию при наведении, но не при наведении курсора.

У меня есть CSS анимация ниже, которую я хотел бы использовать с требованиями выше.

У меня также есть код jQuery, и логика прекрасно работает с использованием «text-ornament», «line-through».Но сквозной переход - очень плохой CSS, я бы хотел объединить приведенный ниже CSS и jQuery для достижения вышеупомянутого.

Это для пунктов меню WordPress. 

jQuery(".menu-menu-container ul li").hover(function() { // Mouse over
  jQuery(this).siblings().stop().css("text-decoration", "line-through");
  jQuery(this).parent().siblings().stop().css("text-decoration", "none");
}, function() { // Mouse out
  jQuery(this).siblings().stop().css("text-decoration", "none");
  jQuery(this).parent().siblings().stop().css("text-decoration", "none");
});
.overlay-content ul li a:hover:after,
.overlay-content ul li a:focus:after,
.overlay-content ul li a:active:after {
  width: 40%;
  background: #000;
}

.overlay-content ul li a:after {
  content: '';
  position: absolute;
  left: 50%;
  width: 0%;
  transform: translateX(-50%);
  height: 2%;
  margin-top: 3.2%;
  background-color: transparent;
  transition: .35s;
}
<div class="menu-menu-container">
  <ul>
    <li> <a href="#">Home</a> </li>
    <li> <a href="#">About</a> </li>
    <li> <a href="#">Contact</a> </li>
    <li> <a href="#">Help</a> </li>
  </ul>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Я хотел бы объединить CSS и jQuery для достижения эффекта анимации при наведении курсора выше.

Ответы [ 2 ]

0 голосов
/ 03 июля 2019

Вам вообще не нужен JS!Просто установите стили для UL hover, а затем отдельно для каждого A hover: 

.menu-menu {
  padding: 0;
}

.menu-menu a {
  text-decoration: none;
  text-align: center;
  display: block;
  /* Relative, we can now use absolute elements inside */
  position: relative;
}

.menu-menu a:after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -2px;
  width: 0%;
  transform: translateX(-50%);
  height: 3px;
  background-color: #000;
  transition: .35s;
}

.menu-menu:hover a:after {
  width: 100%;
}

.menu-menu a:hover:after,
.menu-menu a:focus:after,
.menu-menu a:active:after {
  width: 0%;
  background: #000;
}
<ul class="menu-menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Help</a></li>
</ul>
0 голосов
/ 02 июля 2019

Вместо добавления стилей CSS в самом jQuery я бы добавил и удалил классы на основе событий.Это дает вам больше возможностей для использования функций CSS.Примерно так: 

jQuery(".menu-menu-container ul li").hover(function() { // Mouse over
    jQuery(this).addClass("hovered");
    jQuery(this).siblings("li").addClass("notHovered")
  }, function() { // Mouse out
    jQuery(this).siblings().stop().removeClass("notHovered"); 
    jQuery(this).removeClass("hovered")
  });

и CSS: 

.overlay-content ul li a:hover:after, .overlay-content ul li a:focus:after, .overlay-content ul li a:active:after {
  width: 40%;
  background: #000;
}

.menu-menu-container ul li a:after {
    content: '';
    position: absolute;
    left: 50%;
    width: 0%;
    transform: translateX(-50%);
    height: 2%;
    margin-top: 3.2%;
    background-color: transparent;
    transition: .35s;
}

.menu-menu-container{
    width: 100%;
    background-color: black;
    padding: 0 7.5px;
    box-shadow: 0 4px 4px rgba(0,0,0,0.5)
}

.menu-menu-container li{
  display: inline-block;
  list-style: none;
  padding: 15px;
  border-top: 3px solid transparent;
  border-left: none;
  border-right: none;
  font-family: 'Poppins', sans-serif


}

.notHovered{
  filter: blur(2px);

}

li.hovered{
  border-top-color: white
}

.menu-menu-container a{
  text-decoration: none;
  color: white;
  font-size: 1rem;
}
.menu-menu-container li, .menu-menu-container *{
  transition: 1s;

}

Вот очень простой codepen , показывающий, что я имею в виду.Это просто чтобы дать вам представление ... Надеюсь, это поможет.

...