Question

我正在写问是否有更简单的方法可以像在这段代码中那样做同样的事情：

jsfiddle.net/t9euvoe9/5/

我正在尝试做朋友列表。我注意到这里简单地使用内置边框是不够的。我找到了一些方法，在每个朋友被自定义单行（botttom）划分。

当我徘徊朋友时，我希望线条消失（上一个朋友的BOTTOM线，以及实际上HOVER的朋友的BOTTOM线）。此外，这些填充现在不能正常工作（悬停时）。

编辑：

我想创建好友列表。实际上我<div>包含所有其他<div class="friend">。我希望将每个<div class="friend">与一行分开，这将在胡友朋友元素

之后隐藏

我实际上这样做的方式：

<div class="friend">元素的位置设置为相对。我使用:before和:after伪选择器创建自定义边框线。当某些<div class="friend">悬停时，我会使用display:none隐藏此边框。这隐藏了底部边框。要隐藏顶部边框，我设置<div class="friend">和margin-top: 1%以克服此移动，使padding-top: 6%移动.friend { position: relative; width: 100px; padding-top: 5%; padding-bottom: 5%; } .friend:hover { margin-top: -1%; padding-top: 6%; height: calc(100% + 1px); background-color: red; } .friend:hover:after { display:none; } .friend img { vertical-align: middle; } .friend:first-child:before { content: ''; display: block; width: 100%; left: 10%; height: 1px; position: absolute; background-color: #ccc; top: 0; } .friend:after { content: ''; display: block; width: 100%; left: 10%; height: 1px; position: absolute; background-color: #ccc; bottom: 0; }。

示例：

<div class="friend">
    <img class="img-circle" src="http://www.zerohedge.com/sites/default/files/pictures/picture-197359.gif" alt="" width="40" height="40">
    <span class="name">Ania</span>
</div>
<div class="friend">
    <img class="img-circle" src="http://www.zerohedge.com/sites/default/files/pictures/picture-197359.gif" alt="" width="40" height="40">
    <span class="name">Ania</span>
</div>

character_*

Answer 1

虽然这个问题可能会更好（请参阅BSMP留下的评论），但我还是回答了问题。

http://jsfiddle.net/tw32r0L6/

我所做的是删除一堆额外的东西，并简化一点。你应该真正使用CSS border属性，因为它是内置的做这样的事情的方式。这个任务的基础并不需要使用伪元素。

因此，在删除了伪元素的CSS之后，您可以看到我添加了这个：

.friend:not(:first-of-type){
    border-top: 2px #000 solid;
}

.friend:hover + .friend, .friend:hover{
    border-top-color: transparent;
}

第一部分选择.friend div，这不是第一部分，正如:not(:first-of-type)所见。您可以阅读有关CSS伪类here的更多信息。您可以看到我添加的唯一样式是顶部边框。

然后第二个选择器隐藏了悬停的所有.friend div的顶部边框，以及悬停的第一个.friend div。这是使用+选择器完成的，该选择器选择元素的下一个兄弟。

我做的最后一件事是移除你在另一个.friend:hover部分中的一些东西，因为在这些修复之后不需要这样做。

选择器之前/之后不包括填充

1 个答案: