Remove border when hover on item

Question

I want red border to be removed when hover on each item.

As you can see from the jsFiddle that I've attached here. It only worked on the first div on left, and also the rest of the div on the right.

The reason I do it this way is because I want it to be flexible so that I can add or remove on HTML without affecting CSS part.

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

Thanks for the help!

I can see the red border only on second and third elements in the fiddle. So what do you mean by remove red border which does not exist? — Pons Purushothaman, Jun 27 '19 at 04:15
I want the border of second and third to be removed when hover on each of it. Just like when you hover on the first item. — Stacie T., Jun 27 '19 at 04:18
Yes. Pure CSS. As you can see from the script above, it only works on the element comes after it but not the previous one. — Stacie T., Jun 27 '19 at 04:27
@Zze In this case, there's gap between two groups of items, which complicates the sibling selector method. — showdev, Jun 27 '19 at 05:27
Possible duplicate: https://stackoverflow.com/questions/5210033/using-only-css-show-div-on-hover-over-a — Zze, Jun 27 '19 at 06:09

Udhay Titus · Answer 1 · 2019-06-27T04:49:54.620

1

use this in your 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>

edited Jun 27 '19 at 04:49

answered Jun 27 '19 at 04:21

Udhay Titus

5,761
4
23
41

2

You might consider `border-color:transparent` instead of `border:none` so that the position of the label doesn't shift on hover. – showdev Jun 27 '19 at 04:36
btw, there is one line of my css (.item-left:last-of-type) is not working. Do you mind to help me take a look on that? I want to add border right on the last item-left but it seems not working. – Stacie T. Jun 27 '19 at 04:38
@showdev thanks for that. I will change on my script. :-) – Stacie T. Jun 27 '19 at 04:39
@StacieT. [`last-of-type`](https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type) does not take classes into consideration, only the element type (e.g. `
`). See [How do I select the “last child” with a specific class name in CSS?](https://stackoverflow.com/questions/13211453/css-how-to-say-classlast-of-type-classes-not-elements)
– showdev Jun 27 '19 at 04:41
@showdev I tried all possible which is `border:0px solid #fff;`,`border:none` and `border:1px solid transparent;` but almost your suggestion also okay. – Udhay Titus Jun 27 '19 at 04:41
@StacieT. check the updated answer. Already @showdev mentioned in comment class of last-of-type will be not work, so I add additional class name for last `item-left` class it will be work's now. – Udhay Titus Jun 27 '19 at 04:52
@UdhayTitus I tried to change css style for border style. But it's not working now after I changed it. Did i do it wrongly? So sorry. I'm very new to css and i'm quite confused with the (+) on css. Here's the fiddle: https://jsfiddle.net/lilpenguin/7bmv2aej/32/ – Stacie T. Jun 27 '19 at 08:19
@UdhayTitus the previous fiddle was different from this. I want both left and right border to be gone when hover. Is it possible to do that? – Stacie T. Jun 27 '19 at 08:28
yes you can do by using `border:none` on hover it will be works – Udhay Titus Jun 27 '19 at 08:32
do you mind to help me take a look on this? https://jsfiddle.net/lilpenguin/7bmv2aej/36/ the right one is working now. but why is the left one not working? while they are using the same code? – Stacie T. Jun 27 '19 at 08:34
as you can see, the border won't disappear when hover on the left side. – Stacie T. Jun 27 '19 at 08:35

showdev · Accepted Answer · 2019-06-27T05:32:53.467

Borders on adjacent items can be tricky, especially if those borders change when hovering over an item.

It might work to use outline instead of border. Outlines "never take up space, as they are drawn outside of an element's content," so they won't get doubled up (see outline).

Outlines appear on all sides of an element, as opposed to borders that can be placed on specific sides (e.g. left, right, top, bottom). Setting overflow:hidden on the .wrapper hides the outlines on the outer edges. That way, only the outlines between items are visible.

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

Remove border when hover on item

2 Answers2