1

ナビゲーションリンクをホバリングするときに、テキストを含む背景画像を表示しようとしていますが、何らかの理由で画像が表示されません。

ここにタイトルCSSの一部

   .navigation h1 {
    position: absolute;
    right: 22px;
    top: -7px;
    display: none;
    padding: 4px 20px 4px 7px;
    color: #fff;
    white-space: nowrap;
    background: transparent url('http://i.imgur.com/dbnCNPk.png') 100% 50% no-repeat;
    }

HTML

<div class="navigation">
    <ul>
        <li>
            <h1>one</h1>
            <a href="#hem" class="active">one</a>                      </li>
        <li>    <h1>two</h1>
            <a href="#two">two</a></li>
        <li>    <h1>three</h1>
            <a href="#three">three</a></li>
    </ul>
</div>

そしてフィドル

JSFiddle

4

4 に答える 4

1 
.navigation h1 {
position: absolute;
right: 22px;
top: -7px;
display: none;  /*  <-- were you expecting some magic ? */
...
}

あなたのCSSの変身は少し台無しになっているようです. 「ホバー」宣言は次のとおりです。

.navigation a:hover{
border-radius:25px;
background-color:#f68A33;
}

魔女はあなたが望むものを達成しません。Aタグを管理するだけです。

そのため、タグで何らかのアクションを実行したい場合は、スコープを設定する必要があります。

h1 { remove the display:none; h1 is block-level by default}
h1.hover {do your background thing here }
于 2013-07-17T12:53:50.970 に答える