0

これが私が今使っているヘッドコンテナです。

    <header>
<div class ="headcontainer">

<nav class ="links">
<a href="index.html">Home</a>
<a href="#">Page1</a>
<a href="#">page2</a>
</nav>

<nav class ="login">
<a href="login.html">Login</a>
<a href="#">page4</a>
</nav>
</div>
</header>

これはCSS部分です：

.headcontainer {
    width: 960px;
    margin: auto;



header {

    width: 100%;
    height: 35px;
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    background: #A7A7A7;

}

.links {
    float: left;
    text-align: left;
}


.links a {
float: left;
width: auto;
height: auto;
font-size: 16px;
color: #FFF;
font-weight: 600;
margin: 10px 0 0 15px;

}

基本的に、ウェブサイトの上部でクリックできるさまざまな単語があり、基本的にナビゲーション ヘッダーとして機能します。したがって、基本的には、テキストに白い色を付けた背景として灰色の線のストライプがあります。このような：

ヘッダ

私がやりたいことは、これらの単語の 1 つにカーソルを合わせると、背景が白くなり、四角形のその単語だけの代わりにテキストが灰色になることです。このような：

ヘッダーホバー

いろいろな方法を試しましたが、うまくいきませんでした。私が得ることができる助けをいただければ幸いです！ありがとう。

4

3 に答える 3

1

これをCSSに追加します。

.links a:hover {
    background: white;
    color: gray;
}
于 2013-01-08T16:52:20.713 に答える
0

要素でCSS：hoverセレクターを使用して、色と背景を好きなように変更できます。こちらをご覧ください

または、jQueryの.hover（）関数を使用できます。ここを見て

于 2013-01-08T16:51:38.327 に答える
0

これは、jQueryを使用して実現できます。

リンクのコンテナにはIDが必要です。
選択したリンクにカーソルを合わせると、onhoverアクションを適用する必要があります。これにより、jQueryアクションがトリガーされてCSSが修正されます。

開始するのに適した場所は、 divの背景色で、リンクの色を変更するための短いjQuery関数を伴うオンホバーを変更します。

于 2013-01-08T16:54:27.870 に答える