1

メニューにブロックホバー効果を追加したい。ただし、購入したテンプレートには、ダースベイダーのリアエンドから出てきたように見える大きなスタイルシートがあります。コーディングの知識が限られているため、このタスクは困難です。

これが私のサイトのメニュー部分のフィドルです（スタイルシート全体も含まれています）：http：//jsfiddle.net/VjhJ4/

ホバーすると、各メニューリンクのブロックの色が異なるブロックホバー効果が必要です。例としてこの画像を参照してください（マウスが上にないときにブロックを小さくしたいことに注意してください）：http：//i.imgur .com / 1xbbl.png

これを行うスクリプトに出くわしました。HTML：

<div id="links">
    <ul>
      <li><a href="#" title="Text">Link Heading One
        <em>Description of link.</em>
        <span>Date posted</span></a></li>
      <li><a href="#" title="Text">Link Heading One
        <em>Description of link.</em>
        <span>Date posted</span></a></li>
    </ul>
</div>

CSS：

#links li {
        border: 1px dotted #999;
        border-width: 1px 0;
        margin: 5px 0;
}

#links li a {
        color: #990000;
        display: block;
        font: bold 120% Arial, Helvetica, sans-serif;
        padding: 5px;
        text-decoration: none;
}

 * html #links li a {  /* make hover effect work in IE */
    width: 400px;
}

#links li a:hover {
        background: #ffffcc;
}

#links a em {
        color: #333;
        display: block;
        font: normal 85% Verdana, Helvetica, sans-serif;
        line-height: 125%;
}

#links a span {
        color: #125F15;
        font: normal 70% Verdana, Helvetica, sans-serif;
        line-height: 150%;
}

ホバーはアンカー要素の特定のIEバージョンでのみ機能することを読んだので、この手法が最適な手法であると思います。

さて、これを自分のページに追加するにはどうすればよいですか？フィドルを更新してください：http：//jsfiddle.net/VjhJ4/ そして、さらに情報が必要な場合はお知らせください。

4

6 に答える 6

2

ホバー時に境界線の下部と背景色を追加する必要があります。

このデモを参照してください http://jsfiddle.net/enve/VjhJ4/7/

于 2012-08-10T17:07:27.327 に答える
1

変化する：

a:hover { text-decoration: underline; }

to（色を実際に必要な色に変更する）：

a:hover { text-decoration: underline; background-color:red; }

と変更：

a { text-decoration: none; color: #00b7f3;}

to（色を実際に必要な色に変更する）：

a { text-decoration: none; color: #00b7f3; border-bottom-color: red; border-bottom-style: solid; border-bottom-width: 5px;}

デモ： http： //jsfiddle.net/KqaC8/

編集：これはホバーカラーのみを実行します。ホバリングしていないときは下の色で作業します。押し続けてください。

編集2：これはあなたが今望むすべてをするはずです。

于 2012-08-10T16:46:37.860 に答える
1

このデモを参照してください。ホバー時に背景色などを設定する必要があります

于 2012-08-10T16:48:34.313 に答える
1

使用しているテンプレートのCSSを変更したくない場合は、次のようにすることができます...

li.menu-item:hover{background:red !important;}

！importantは、テンプレートスタイルを上書きするだけです

これが基本的なcssを提供するフィドルです。！importantを使用して、テンプレートコードhttp://jsfiddle.net/cX5bk/をオーバーライドすることを確認できます。

于 2012-08-10T16:49:43.427 に答える
1

http://codepen.io/anon/pen/wqpdI

これが私があなたが必要だと信じているもので作った例です。それは実際には非常に単純であり、それを行うには多くの方法があります！基本的に、各リンク（またはその親）にはクラスが必要です。その後、各クラスのタグの色を変更できます。

于 2012-08-10T16:52:27.937 に答える
1

あなたはCSSについてあまり理解しておらず、テンプレートを購入しているので、それについてあまり知らないはずです。

それで大丈夫です。すべての人があなたに理解できないものや解決策を送る前に、私はあなたが参照している写真のような結果であなたのフィドルを更新しました：

これはあなたのフィドルです

ul#secondary-menu a { font-size: 13px; color: #48423f; text-decoration: none; text-transform: uppercase; font-weight: bold; padding: 22px 16px 0 16px; }

ul#secondary-menu #menu-item-33 a {border-bottom:5px solid #00f;}
ul#secondary-menu #menu-item-34 a {border-bottom:5px solid #0f0;}
ul#secondary-menu #menu-item-35 a {border-bottom:5px solid #f00;}

ul#secondary-menu a:hover { color: #fff;text-shadow: 0 0;}

ul#secondary-menu #menu-item-33 a:hover {background-color:#00f;}
ul#secondary-menu #menu-item-34 a:hover{background-color:#0f0;}
ul#secondary-menu #menu-item-35 a:hover{background-color:#f00;}
于 2012-08-10T17:18:31.413 に答える