Question

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

正如您从jsFiddle中看到的，我已经在此处附加了。它仅在左侧的第一个div起作用，而在右侧的其余div起作用。

之所以这样做，是因为我希望它具有灵活性，以便我可以在HTML上添加或删除而不影响CSS部分。

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

Answer 2

相邻项目can be tricky上的边框，尤其是当鼠标悬停在某个项目上时，如果边框改变了。

使用outline代替border可能会起作用。大纲“绝不占用空间，因为它们被绘制在元素的内容之外”，因此它们不会成倍增加（请参见outline）。

轮廓出现在元素的所有侧面上，而不是可以放置在特定侧面上的边框（例如，左，右，上，下）。在overflow:hidden上设置.wrapper会隐藏外边缘的轮廓。这样，只有项目之间的轮廓可见。

.wrapper {
  height: 100px;
  display: flex;
  background-color: lightblue;
  overflow: hidden;
}

.item {
  background-color: lightgreen;
  flex: 0 0 15%;
  outline: 1px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item-left+.item-right {
  margin-left: auto;
}

.item:hover {
  z-index: 1;
  outline: none;
  background-color: mediumseagreen;
  color: white;
  box-shadow: 0px 0px 0px -1px rgba(0, 0, 0, 0.2), 0px 0px 10px 0px rgba(0, 0, 0, 0.19);
  cursor: pointer;
}

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

悬停在项目上时删除边框

2 个答案: