2

検索した結果、希望する効果が得られなかったので、誰かがこれが可能かどうかを教えてくれることを願っています.

私は基本的にボーダーホバーを中央に配置したいので、リンクにマウスを合わせるとボーダーボトムが中央に配置されます。境界線の幅を 20px 前後の固定サイズにして中央揃えにしたいと思います。

ご覧のとおり、これまでのところ本当に基本的なものであり、jsfiddle はここにあります: http://jsfiddle.net/pCQLN/3/

下の画像のようなものが欲しいです：

ここに画像の説明を入力

余裕のある時はよろしくお願いします！

これが私のコードです。

HTML

<div id="wrap">
<div id="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</div>
</div>

CSS

#wrap {
    width:40em;
    height:3em;
    margin:0 auto;
}
#nav {
    float:right;
    width:75%;
}
#nav ul {
    display:inline;
    list-style: none;
    float: right;
}
#nav li {
    float: left;
    width:50px padding-right:1em;
}
#nav a {
    text-align:center;
    text-decoration:none;
    color: #888;
    font-size:1em;
    float: left;
}
#nav a:hover {
    color:#212121;
    display:block;
    width:20px;
    margin:0 auto;
    border-bottom:3px solid #000;
}
4

3 に答える 3

0

次のようなことを試すことができます：

<li><a href="#">Home</a><span class="hovered"></span></li>


.hovered {
   margin: 0;
   height: 3px;
   width: 20px;
   background-color:transparent;
   display: inline-block;
}

#nav a:hover + .hovered {

    background-color: black;
}

http://jsfiddle.net/pCQLN/9/

于 2013-08-25T03:55:32.417 に答える