Kiran Kiran - 8 days ago 6
HTML Question

My border effect isn't working properly when hovering

I am designing a simple list with little CSS. In this design, if the user hovers over a list item it will highlight the top and bottom border. But, except for the last one hover, only one border is highlighted.

If I remove

margin-bottom: -1px;
then it is displaying
2px
border.



.list {
list-style-type: none;
color: #333;
padding: 0;
background-color: #fff;
}

.list-item {
padding-top: 10px;
padding-bottom: 10px;
border-top: 1px solid #eeeeef;
border-bottom: 1px solid #eeeeef;
margin-bottom: -1px;
}
.list-item:hover {
color: #0275d8;
border-top: 1px solid #0275d8;
border-bottom: 1px solid #0275d8;

}

<ul class='list'>
<li class='list-item'>Sample List 1</li>
<li class='list-item'>Sample List 2</li>
<li class='list-item'>Sample List 3</li>
</ul>





Fiddle

Answer

This is because the .list-item below still has a #eeeeef border-top. An easy way to fix this is to say the next .list-item should have a the border-top changed to #0275d8 too.

We can do that like this:

.list {
  list-style-type: none;
  color: #333;
  padding: 0;
  background-color: #fff;
}
.list-item {
  padding: 10px 0;
  border: 1px solid #eeeeef;
  border-width: 1px 0;
  margin-bottom: -1px;
}
.list-item:hover {
  color: #0275d8;
  border-color: #0275d8;
}

/* next .list-item */
.list-item:hover + .list-item {
  border-top-color: #0275d8;
}
<ul class='list'>
  <li class='list-item'>Sample List 1</li>
  <li class='list-item'>Sample List 2</li>
  <li class='list-item'>Sample List 3</li>
</ul>

Hope this helps.

Comments