Html 将鼠标悬停在项目上时删除边框

我希望在每个项目上悬停时删除红色边框

你可以从我附在这里的文件中看到。它只对左侧的第一个div有效，对右侧的其余div也有效

我这样做的原因是因为我希望它是灵活的，这样我就可以在不影响CSS部分的情况下添加或删除HTML

.wrapper{
高度：100px；
显示器：flex；
背景颜色：浅蓝色；
}
.项目{
背景颜色：浅绿色；
弹性：0.15%；
}
.项目左+项目右{
左边距：自动；
}
.项目剩余{
左边框：1px纯红；
}
.左侧项目：类型的第一个{
边界：无；
}
.左项：类型的最后一项{
右边框：1px纯红；
}
.项目权利{
左边框：1px纯红；
}
.项目：悬停{
/*框阴影：x y模糊扩散颜色*/
盒子阴影：0px 0px 0px-1px rgba（0,0,0,0.2），0px 0px 10px 0px rgba（0,0,0,0.19）；
z指数：1；
}
.item:hover+.item.item-left、.item.item-right{
边界：无；
}

左边
左边
左边
赖特
赖特
赖特

在css中使用此选项

.item:hover{
  border:none;
}

.wrapper{
高度：100px；
显示器：flex；
背景颜色：浅蓝色；
}
.项目{
背景颜色：浅绿色；
弹性：0.15%；
}
.项目左+项目右{
左边距：自动；
}
.项目剩余{
左边框：1px纯红；
}
.左侧项目：类型的第一个{
边界：无；
}
/*.左项：类型的最后一项{
右边框：1px纯红；
}*/
1.最后一个左边{
右边框：1px纯红；
}
.项目权利{
左边框：1px纯红；
}
.项目：悬停{
/*框阴影：x y模糊扩散颜色*/
盒子阴影：0px 0px 0px-1px rgba（0,0,0,0.2），0px 0px 10px 0px rgba（0,0,0,0.19）；
z指数：1；
}
.item:hover+.item.item-left、.item.item-right、.item:hover{
边界：无；
}

左边
左边
左边
赖特
赖特
赖特

相邻项目的边框，尤其是当鼠标悬停在项目上时，这些边框发生变化时

使用

outline

而不是

border

可能有效。轮廓“永远不会占用空间，因为它们是在元素内容之外绘制的”，所以它们不会被折叠起来（请参阅）

轮廓显示在图元的所有边上，而不是可以放置在特定边上的边框（例如，左、右、上、下）。在

.wrapper

上设置

溢出：隐藏

，隐藏外边缘上的轮廓。这样，只有项目之间的轮廓才可见

.wrapper{
高度：100px；
显示器：flex；
背景颜色：浅蓝色；
溢出：隐藏；
}
.项目{
背景颜色：浅绿色；
弹性：0.15%；
轮廓：1px纯红；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.项目左+项目右{
左边距：自动；
}
.项目：悬停{
z指数：1；
大纲：无；
背景色：中绿色；
颜色：白色；
盒子阴影：0px 0px 0px-1px rgba（0,0,0,0.2），0px 0px 10px 0px rgba（0,0,0,0.19）；
光标：指针；
}

左边
左边
左边
赖特
赖特
赖特

我只能在小提琴的第二和第三个元素上看到红色边框。那么，你所说的删除不存在的红色边框是什么意思呢？我希望第二个和第三个边框在每个边框上悬停时都被删除。就像你停留在第一项上一样。你需要纯css解决方案吗？是的。纯CSS。从上面的脚本中可以看出，它只对它后面的元素有效，而对前面的元素无效。@Zze在本例中，两组项目之间存在间隙，这会使兄弟选择方法复杂化。您可能会考虑<代码>边框颜色：透明< /代码>，而不是<代码>边框：没有“< /代码>”，这样标签的位置不会在HoVFER上移位。BTW，有一行CSS（.item左边：最后一种类型）不起作用。你介意帮我看一下吗？我想在左边最后一项的右边添加边框，但它似乎不起作用。@showdev谢谢。我将更改脚本。：-）@史黛西。不考虑类，只考虑元素类型（例如

）。请参阅@showdev我尝试了所有可能的方法，即

border:0px solid#fff

，

边框：无

和

边框：1px实心透明但是你的建议也差不多可以。