Как я могу вызвать несколько действий при наведении на ссылки при наведении курсора на элемент div? - PullRequest
Новая
       7

Как я могу вызвать несколько действий при наведении на ссылки при наведении курсора на элемент div?

0 голосов
/ 06 января 2019

Я пытаюсь вызвать несколько эффектов при наведении курсора на мой основной элемент. Я не могу понять, как сделать анимацию строки на всех трех ссылках одновременно, и можно ли это сделать только в css или если мне нужно использовать javascript, и я не могу найти правильное решение для предыдущих постов. Вот код: 

.right-project-headline h2 a {
    text-decoration: none;
    color: black;
    position: relative;
}
.right-project-headline h2 a::before, .right-project-headline h2 a::after {
  content: '';
  background: black;
  position: absolute;
  top: 55%;
  height: 3px;
  width: 0;
}
.right-project-headline h2 a::before {
  left: 0;
}
.right-project-headline h2 a::after {
  right: 0;
  transition: width 500ms ease;
}
.right-project-headline h2 a:hover::before {
  width: 100%;
  transition: width 500ms ease;
}
.right-project-headline h2 a:hover::after {
  width: 100%;
  background: transparent;
  transition: 0;
}
<div class="right-project-headline">
  <h2><a href="industrial-rev.html">The</a></h2>
  <h2><a href="industrial-rev.html">Industrial</a></h2>
  <h2><a href="industrial-rev.html">Revolutions</a></h2>
</div>

Ответы [ 3 ]

0 голосов
/ 06 января 2019

Вам нужно перехватить событие hover для элемента с классом .right-project-headline, а затем применить стиль к элементам <a> внутри него, например: 

.right-project-headline:hover a::before {
  width: 100%;
  transition: width 500ms ease;
}

.right-project-headline:hover a::after {
  width: 100%;
  background: transparent;
  transition: 0;
}

Полный пример: 

.right-project-headline {
   border: 1px solid red;
}

.right-project-headline a {
    text-decoration: none;
    color: black;
    position: relative;
}

.right-project-headline a::before, .right-project-headline a::after {
  content: '';
  background: black;
  position: absolute;
  top: 55%;
  height: 3px;
  width: 0;
}

.right-project-headline a::before {
  left: 0;
}

.right-project-headline a::after {
  right: 0;
  transition: width 500ms ease;
}

.right-project-headline:hover a::before {
  width: 100%;
  transition: width 500ms ease;
}

.right-project-headline:hover a::after {
  width: 100%;
  background: transparent;
  transition: 0;
}
<div class="right-project-headline">
  <h2><a href="industrial-rev.html">The</a></h2>
  <h2><a href="industrial-rev.html">Industrial</a></h2>
  <h2><a href="industrial-rev.html">Revolutions</a></h2>
</div>
0 голосов
/ 06 января 2019

Я бы упростил ваш код, как показано ниже, и применил бы эффект наведения на родительский контейнер 

.right-project-headline h2 a {
  text-decoration: none;
  color: black;
  background: linear-gradient(black, black) no-repeat;
  background-size: 0% 4px; /*left:0 top:55%*/
  background-position: 0% 55%; /*left:0 top:55%*/
  transition: background-size 0.5s, background-position 0s 0.5s;
}

.right-project-headline:hover h2 a {
  background-size: 100% 4px; /*width:100% height:4px*/
  background-position: 100% 55%; /*right:0 top:55%*/
}
<div class="right-project-headline">
  <h2><a href="industrial-rev.html">The</a></h2>
  <h2><a href="industrial-rev.html">Industrial</a></h2>
  <h2><a href="industrial-rev.html">Revolutions</a></h2>
</div>

Вот еще один синтаксис для background-position (более интуитивно понятный): 

.right-project-headline h2 a {
  text-decoration: none;
  color: black;
  background: linear-gradient(black, black) no-repeat;
  background-size: 0% 4px; 
  background-position: left 0 top 55%; 
  transition: background-size 0.5s, background-position 0s 0.5s;
}

.right-project-headline:hover h2 a {
  background-size: 100% 4px; 
  background-position: right 0 top 55%; 
}
<div class="right-project-headline">
  <h2><a href="industrial-rev.html">The</a></h2>
  <h2><a href="industrial-rev.html">Industrial</a></h2>
  <h2><a href="industrial-rev.html">Revolutions</a></h2>
</div>

Еще один с сокращенной версией и меньшим количеством кода: 

.right-project-headline h2 a {
  text-decoration: none;
  color: black;
  background: linear-gradient(black, black) var(--p,0%) 55%/var(--p,0%) 4px no-repeat;
  transition: background-size 0.5s, background-position 0s 0.5s;
}

.right-project-headline:hover h2 a {
  --p:100%;
}
<div class="right-project-headline">
  <h2><a href="industrial-rev.html">The</a></h2>
  <h2><a href="industrial-rev.html">Industrial</a></h2>
  <h2><a href="industrial-rev.html">Revolutions</a></h2>
</div>
0 голосов
/ 06 января 2019

Вы должны добавить :hover к вашему div в CSS, а не к вашим a элементам.

Это селектор для входа в div 

div a

Это селектор для зависания в div 

div a:hover

И это селектор для в подвешенном div 

 div:hover a

Так что это должно сработать 

.right-project-headline h2 a {
    text-decoration: none;
    color: black;
    position: relative;
}
.right-project-headline h2 a::before, .right-project-headline h2 a::after {
  content: '';
  background: black;
  position: absolute;
  top: 55%;
  height: 3px;
  width: 0;
}
.right-project-headline h2 a::before {
  left: 0;
}
.right-project-headline h2 a::after {
  right: 0;
  transition: width 500ms ease;
}
.right-project-headline:hover h2 a::before {
  width: 100%;
  transition: width 500ms ease;
}
.right-project-headline:hover h2 a::after {
  width: 100%;
  background: transparent;
  transition: 0;
}
...