CODEWITHSUNDEEP
htmllist
Kiran
Kiran

Reputation: 449

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

Upvotes: 2

Views: 39

Answers (3)

theoretisch
theoretisch

Reputation: 1728

This should help you. Its not a beautiful solution but it works I think.

.list {
    list-style-type: none;
    color: #333;
    padding: 0;
}
.list-item {
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid grey;
}
.list-item:hover{
    color: #0275d8;
    border-color: #0275d8;
}
li:hover + li {
    border-top-color: #0275d8;
}
li:last-child{
    border-bottom: 1px solid grey;
}
<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>

Upvotes: 0

Andrew Bone
Andrew Bone

Reputation: 7291

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

Upvotes: 2

Sony Mathew
Sony Mathew

Reputation: 17

Please apply this class. change the margin bottom:-1px to 0px

.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: 0px;
}
.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>

Upvotes: -1

Related Questions