我的边框效果在悬停时无法正常工作

我正在用小CSS设计一个简单的列表。在此设计中，如果用户将鼠标悬停在列表项上，它将突出显示顶部和底部边框。但是，除了最后一个悬停，只有一个边框突出显示。我的边框效果在悬停时无法正常工作

如果我删除margin-bottom: -1px;那么它显示2px边框。

.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

来源

2016-11-25 Kiran

但是在第一和第二个li之间，你也有一个2px边框。你想要那个吗？ – theoretisch

删除'margin-bottom：-1px;'时，我无法重现您的问题。你使用的是什么浏览器？ – Roberrrt

@theoretisch：没有。我不想要2px边框显示。只显示1px。 – Kiran

这是因为下面仍然是.list-item有#eeeeef边框顶部。解决这个问题的一个简单方法就是说下一个.list-item也应该有一个边框顶部变为#0275d8。

我们是这样做的：

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

希望这有助于。

来源

2016-11-25 10:48:12

是的，它按我想要的方式工作。谢谢！ – Kiran

ahh好，我认为第一个和第二个li之间的界限也应该是1px。 – theoretisch

@Kiran我现在也对CSS做了一些优化。 –

这会帮助你。它不是一个美丽的解决方案，但它的工作我认为。

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

来源

2016-11-25 10:38:51 theoretisch

它的工作，但当你悬停时，仍然在下面显示灰色底部边框。 – Kiran

@Kiran我修好了试试吧 – theoretisch

是的，但@安德鲁的一个更干净。你的'李'风格正在让我的另一个'李'！ – Kiran

-1

请将此类。改变margin bottom:-1px到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>

来源

2016-11-25 10:41:18

请检查该 –

https://jsfiddle.net/sonymathew/ojky4zhj/ –

你检查它显示的2px边界正常吗？ – Kiran

我的边框效果在悬停时无法正常工作

回答

相关问题