html – 当鼠标悬停在div上时,如何在链接上触发多个悬停 *** 作？

概述我试图在悬停在我的主div上时触发多个悬停效果.我不知道如何同时在所有三个链接上制作线条动画,以及这是否只能在css中完成,或者我是否必须使用 javascript,并且我没有找到正确的解决方案以前的帖子.这是代码： .right-project-headline h2 a { text-decoration: none; color: black; position: r 我试图在悬停在我的主div上时触发多个悬停效果.我不知道如何同时在所有三个链接上制作线条动画,以及这是否只能在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 >  <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) 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 >  <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 >  <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 >  <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>

总结

以上是内存溢出为你收集整理的html – 当鼠标悬停在div上时,如何在链接上触发多个悬停 *** 作？全部内容，希望文章能够帮你解决html – 当鼠标悬停在div上时,如何在链接上触发多个悬停 *** 作？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。