1

このホバー効果を CSS と HTML で作成するにはどうすればよいですか?:

通常のビュー:

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

リンク 1 にカーソルを合わせると、上下の線の色が次のように変わります。

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

Link-2 にカーソルを合わせると、次の 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 に答える