HTML

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

这取决于你是如何创建线条的。如果他们是DIV的顶级边界（通过你的头衔猜测），你可以尝试这样的事情;

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;
}

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

希望这是有帮助的

Answer 4

试试这个：

<强>标记：

<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;
}

请参阅此fiddle

如何制作影响下一个兄弟元素的悬停效果呢？

4 个答案:

HTML

CSS