我一直想知道如何实现将边框（或盒子阴影）从一个元素转移到另一个元素的动画效果。 这是原始示例，
.item {
float: left;
width: 33.33%;
padding: 0;
text-align: center;
}
.item:hover {
box-shadow: 0 0 0 3px black;
/* border: 3px solid black; */
}
.sections {
width: 100%;
height: 100%;
margin: 0 auto;
}
ul {
list-style-type: none;
}
a:hover {
text-decoration: none;
}
a {
text-decoration: none;
} <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="sections">
<ul>
<li class="item"><a href="#">Element 1</a>
</li>
<li class="item"><a href="#">Element 2</a>
</li>
<li class="item"><a href="#">Element 3</a>
</li>
</ul>
</div>
</body>
</html>
在这种情况下，“边界”在box-shadow类中是border或.item:hover。如您所见，边框在悬停事件发生时出现并被破坏，但是我需要边界从一个li元素流到另一个li元素而又不被破坏，并始终保持可见。
我发誓我在几个网站上都看到过这种东西，你能在JavaScript的帮助下对此有所建议吗？
答案 0 :(得分：0)
也许这可以帮助您
我是从Codepen那里得到的，这不是我的代码
* {
box-sizing: border-box;
}
body {
font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}
.container {
width: 50%;
margin: 0 auto;
}
ul li {
display: inline;
text-align: center;
}
a {
display: inline-block;
width: 25%;
padding: .75rem 0;
margin: 0;
text-decoration: none;
color: #333;
}
.two:hover ~ hr {
margin-left: 25%;
}
.three:hover ~ hr {
margin-left: 50%;
}
.four:hover ~ hr {
margin-left: 75%;
}
hr {
height: .25rem;
width: 25%;
margin: 0;
background: tomato;
border: none;
transition: .3s ease-in-out;
}<div class="container">
<ul>
<li class="one"><a href="#">Uno</a></li><!--
--><li class="two"><a href="#">Dos</a></li><!--
--><li class="three"><a href="#">Tres</a></li><!--
--><li class="four"><a href="#">Quatro</a></li>
<hr />
</ul>
</div>
答案 1 :(得分：0)
希望它对您有用
html {
font-family: 'Josefin Slab', 'Comfortaa', sans-serif;
font-size: 1.2em;
background: #eee;
}
ul {
position: relative;
width: 27em;
height: 2em;
margin: 100px auto;
padding: 0;
white-space: nowrap;
}
ul li {
display: inline;
text-align: center;
}
ul li a {
position: relative;
top: 0;
left: 0;
right: 25em;
bottom: 0;
display: inline-block;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: .4em .2em;
color: #222;
text-decoration: none;
text-shadow: 0 1px 0 white;
/*transition*/
-webkit-transition: width .3s,right .3s;
-moz-transition: width .3s,right .3s;
-o-transition: width .3s,right .3s;
transition: width .3s,right .3s;
}
ul li:nth-child(1) a { width: 4em; }
ul li:nth-child(2) a { width: 4em; }
ul li:nth-child(3) a { width: 4em; }
ul li:nth-child(4) a { width: 12em; }
ul li:nth-child(5) a { width: 5em; }
ul li:last-child a::after {
content: "";
position: absolute;
right: inherit;
bottom: -3px;
width: inherit;
height: 38px;
background: #ccc;
pointer-events: none;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
border: 1px solid transparent;
background: transparent;
}
ul li:nth-child(1) ~ li:last-child a {
right: 25em;
width: 4em;
}
ul li:nth-child(2):hover ~ li:last-child a {
right: 21em;
width: 4em;
}
ul li:nth-child(3):hover ~ li:last-child a {
right: 17em;
width: 4em;
}
ul li:nth-child(4):hover ~ li:last-child a {
right: 5em;
width: 12em;
}
ul li:nth-child(5):last-child:hover a {
right: 0;
width: 5em;
}
ul li:hover ~ li:last-child a::after,
ul li:last-child:hover a::after { border-color: red; }
ul li:last-child a {
min-width: 5em;
max-width: 5em;
}
ul li a:hover,
ul li a:focus {
color: red;
/*transition*/
-webkit-transition: width .3s,right .3s,background-color .3s;
-moz-transition: width .3s,right .3s,background-color .3s;
-o-transition: width .3s,right .3s,background-color .3s;
transition: width .3s,right .3s,background-color .3s;
}
ul li a:focus { border-bottom: 3px solid #c351fa; }<ul>
<li><a href="#">Home </a></li><!--
--><li><a href="#"> Lorem </a></li><!--
--><li><a href="#"> Ipsum </a></li><!--
--><li><a href="#"> Lorem dummy text</a></li><!--
--><li><a href="#"> Sit amet </a></li>
</ul>
答案 2 :(得分：0)
我们可以在最后一个li元素上使用伪元素来显示边框，因为CSS允许我们在列表中的任何元素悬停时选择最后一个同级元素。
然后我们可以设置边框颜色并设置此伪元素的正确位置，并将其过渡到悬停的li元素位置。
可能有一个相当通用的解决方案-将CSS变量设置为列表中元素的数量（如果需要，还可以设置转换时间），并且（几乎）所有其他内容都可以使用CSS calc设置。
但是，不幸的是，尽管CSS在理论上具有让您使用n值（在nth-child（n）中）的能力，但目前看来它仅适用于伪元素内容，因此我们不能使用它来做计算。
因此，我在CSS中设置了第n个子设置-当前共有6个子设置，因此您最多可以拥有6个列表，而不会更改--n以外的任何内容。如果您想要更多，请添加更多。
这是代码段。
.sections ul {
--n: 3; /* the number of items in the list */
--t: 1s; /* the time taken to move to the new hover position */
--w: calc(100% / var(--n));
box-sizing: border-box;
padding: 20px 0;
margin: 0;
}
/* below is the original CSS */
.item {
float: left;
width: var(--w);
padding: 0;
text-align: center;
}
.item a {
text-align: center;
}
.sections {
width: 100%;
height: 100%;
margin: 0 auto;
}
ul {
list-style-type: none;
}
a:hover {
text-decoration: none;
}
a {
text-decoration: none;
}
/* end of the original CSS */
ul li:last-child a::after {
position: absolute;
content: '';
right: inherit;
width: var(--w);
height:1.5em;
transform: translateY(-0.3em);
pointer-events: none;
transition: right var(--t) ease;
}
ul li:nth-child(1):hover ~ li:last-child a {
right: calc(var(--w) * calc(var(--n) - 1));
}
ul li:nth-child(2):hover ~ li:last-child a { /*when you hover on the second element it changes the last element's a width and its position */
right: calc(var(--w) * calc(var(--n) - 2));
}
ul li:nth-child(3):hover a {
right: calc(var(--w) * calc(var(--n) - 3));
}
ul li:nth-child(4):hover a {
right: calc(var(--w) * calc(var(--n) - 4));
}
ul li:nth-child(5):hover a {
right: calc(var(--w) * calc(var(--n) - 5));
}
ul li:nth-child(6):hover a {
right: calc(var(--w) * calc(var(--n) - 6));
}
ul li:hover ~ li:last-child a::after,
ul li:last-child:hover a::after {
border: 2px solid black;
}
ul li a {
width: 100%;
} <div class="sections">
<ul>
<li class="item"><a href="#">Element 1</a>
</li>
<li class="item"><a href="#">Element 2</a>
</li>
<li class="item"><a href="#">Element 3</a>
</li>
</ul>
</div>