How can I trigger multiple hover actions on links when hovering over a div?

user_10876036 0
Viewed 307

Im trying to trigger multiple hover effects when hovering over my main div. I can´t figure out how make the line animate on all three links at the same time, and whether this can be done in only css or if i have to use javascript, and im not finding the right solution to previous posts. Here is the code:

.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>

hover css html
3 Answers

I would simplify your code like below and apply hover effect on the parent container

.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>

Here is another syntax for background-position (more intuitive):

.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>

Another one with the shorthand version and less of code:

.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>

user_86203330

You have to add :hover to your div in CSS and not to your a elements.

This is selector for a in div

div a

This is selector for hovered a in div

div a:hover

And this is selector for a in hovered div

 div:hover a

So this should do the trick

.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;
}
user_2170400

You need to catch the hover event on the element with class .right-project-headline and then apply the style to the <a> elements inside it, like this:

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

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

Complete Example:

.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>

user_103664950
Related