1

如何使用 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;
}
4

4 回答 4

5

这是我能想到的最好的纯 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. 最后一个元素同时获得 aborder-top和 a border-bottom。当您将鼠标悬停在一个元素上时，您可以直接更改它border-color和border-top-color它之后的元素。

这种方法相对于其他一些方法的好处是它不需要修改您的 HTML 来使边框以您想要的方式显示。缺点是IE8不支持:last-child。

于 2013-04-11T11:19:43.300 回答
4

这真的取决于你是如何创建线条的。如果它们是 DIV 的顶部边界（根据您的标题猜测），您可以尝试这样的事情；

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

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

于 2013-04-11T11:05:12.310 回答
0

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

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

如果我理解正确的话...

希望这会有所帮助

于 2013-04-11T11:07:11.647 回答
0

试试这个：

标记：

<a href='#'>link1 </a>
<a href='#'>link2 </a>
<a href='#'>link3 </a>

CSS：

a
{
    padding:20px;
    width:100px;
    border:1px Solid #CCC;
}
a:hover
{
    border:1px Solid Red;
}

看到这个小提琴

于 2013-04-11T11:07:48.167 回答