如何使悬停效果也影响下一个同级元素？

Question

如何使用CSS和HTML实现这种悬停效果？：

正常视图：

---------
Link-1
---------
Link-2
---------
Link-3
---------

当我将鼠标悬停在Link-1上时，顶线和底线的颜色会发生变化，如下所示：

=========
Link-1
=========
Link-2
---------
Link-3
---------

如果我将鼠标悬停在Link-2上，这两行会发生变化：

---------
Link-1
=========
Link-2
=========
Link-3
---------

以此类推。

"====“只是表示颜色的变化，而不是双线

实际上我在这个问题上相当迷惑，但这是我到目前为止所得到的：

<div id="nav">

                <a href="#" class="dummy">Link-1</a>
                <a href="#" class="dummy">Link-2</a>
                <a href="#" class="dummy">Link-3</a>

</div>

和CSS：

#nav{
    width: 200px;
    height: 700px;
    background-color: red;
}
#nav a{
    display: block;
    width: 190px;
    text-decoration: none;
    padding-left: 10px;
    padding-top: 3px;
    margin-bottom: 5px;
    border-top: 1px solid #d5d5d5;
}
#nav a:hover  {
    color: white;
    font-weight: bold;
    border-top: 1px solid white;
}

Answer 1

This is the best way I can think of doing it in pure CSS。

HTML

<ul>
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
</ul>

CSS

li
{
    padding: 10px;
    border-color: #000;
    border-top: 1px solid;
}

li:last-child
{
    border-bottom: 1px solid;
}

li:hover
{
    border-color: #f00;
}

li:hover + li
{
    border-top-color: #f00;
}

基本上，可悬停元素列表中的每个元素都有一个border-top。最后一个元素同时获取border-top和border-bottom。当您将鼠标悬停在某个元素上时，您将更改其border-color以及紧随其后的元素的border-top-color。

与其他方法相比，这种方法的好处是它不需要修改HTML就可以使边框按您希望的方式显示。缺点是IE8不支持:last-child。

Answer 2

这真的取决于您是如何创建这些行的。如果它们是DIVs的顶端边框(根据你的标题来猜测)，你可以尝试这样的东西；

div:hover {
    border-color: blue;
}
div:hover + div { /* the div following the hovered div */
    border-color: blue;
}

在http://jsfiddle.net/frw2n/上演示

Answer 3

对于顶部和底部边框，您可以尝试将链接放在div中，并为所有这些div提供相同的类名和类样式，如下所示：

.classname:hover
{
    border-top:1px dotted blue;
    border-bottom:1px dotted blue;
} 

如果我没理解错的话。

希望这能对你有所帮助