html - 将鼠标悬停在元素上时删除边框

Question

我希望在将鼠标悬停在每个元素上时删除红色边框。

从jsFiddle可以看出我附在这里。它只对左侧的第一个 div 有效，对右侧的其余 div 也有效。

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

.wrapper {
  height: 100px;
  display: flex;
  background-color: lightblue;
}
.item {
  background-color: lightgreen;
  flex: 0 0 15%;
}
.item-left + .item-right {
  margin-left: auto;
}
.item-left{
	border-left:1px solid red;
}
.item-left:first-of-type{
	border:none;
}
.item-left:last-of-type{
	border-right:1px solid red;
}
.item-right{
	border-left:1px solid red;
}
.item:hover{
	/* box-shadow: x y blur spread color; */
	box-shadow:0px 0px 0px -1px rgba(0, 0, 0, 0.2), 0px 0px 10px 0px rgba(0, 0, 0, 0.19);
	z-index:1;
}
.item:hover + .item.item-left, .item.item-right {
    border:none;
}

<div id="bottom" class="bottom">
  <div class="wrapper">
    <a class="item item-left">
      <div class="item-label">Left</div>
    </a>
    <a class="item item-left">
      <div class="item-label">Left</div>
    </a>
    <a class="item item-left">
      <div class="item-label">Left</div>
    </a>
    <a class="item item-right">
      <div class="item-label">Right</div>
    </a>
    <a class="item item-right">
      <div class="item-label">Right</div>
    </a>
    <a class="item item-right">
      <div class="item-label">Right</div>
    </a>
  </div>
</div>

感谢您的帮助!

Answer 1

在你的 CSS 中使用它

.item:hover{
  border:none;
}

.wrapper {
  height: 100px;
  display: flex;
  background-color: lightblue;
}
.item {
  background-color: lightgreen;
  flex: 0 0 15%;
}
.item-left + .item-right {
  margin-left: auto;
}
.item-left{
	border-left:1px solid red;
}
.item-left:first-of-type{
	border:none;
}
/*.item-left:last-of-type{
	border-right:1px solid red;
}*/

.last-left{
	border-right:1px solid red;
}

.item-right{
	border-left:1px solid red;
}
.item:hover{
	/* box-shadow: x y blur spread color; */
	box-shadow:0px 0px 0px -1px rgba(0, 0, 0, 0.2), 0px 0px 10px 0px rgba(0, 0, 0, 0.19);
	z-index:1;
}
.item:hover + .item.item-left, .item.item-right, .item:hover {
    border:none;
}

<div id="bottom" class="bottom">
  <div class="wrapper">
    <a class="item item-left">
      <div class="item-label">Left</div>
    </a>
    <a class="item item-left">
      <div class="item-label">Left</div>
    </a>
    <a class="item item-left last-left">
      <div class="item-label">Left</div>
    </a>
    <a class="item item-right">
      <div class="item-label">Right</div>
    </a>
    <a class="item item-right">
      <div class="item-label">Right</div>
    </a>
    <a class="item item-right">
      <div class="item-label">Right</div>
    </a>
  </div>
</div>