0

いくつかのメニュー項目を含むメニューバーがあります。

メニュー項目のあるメニューバー

メニューバーは、メニュー項目 (これもdivs ) を含むdivであり、各メニュー項目の内部にはhrefがあります。

HTMLは次のとおりです。

<style>
.menubar-style {
    width: 100%; 
    background-color: white; 
    height: 20px; 
    text-align:center;
}
.menuitem-style {
    float: left; 
    width: 10%; 
    border-right: thin; 
    border-right-style:solid;
}
</style>
...
...
<div class="menubar-style">
    <div class="menuitem-style"><a href="#">Link 1</a></div>
    <div class="menuitem-style"><a href="#">Link 2</a></div>
    <div class="menuitem-style"><a href="#">Link 3</a></div>
</div>

私がやりたいのは、カーソルがリンクの上にあるときに、メニュー項目の背景色 ( hrefだけでなくdiv ) を変更することです。

リンクからマウスオーバーイベントをキャプチャし、それを使用してメニュー項目全体の背景色をペイントするにはどうすればよいですか?

さらに良いことに、マウスがメニュー項目全体 (リンクだけでなくdiv ) の上にあるかどうかを確認する方法はありますか? リンクだけでなく、ボックス上のどこでもマウスでメニュー項目の色が変わるため、これはより良いオプションです。

ありがとうございます！

1月

4

2 に答える 2

2

事前定義されたスタイルにセレクターを追加する:hoverだけで、マウスがその特定のオブジェクトの上にある間だけ適用できます

.menuitem-style:hover {
    background-color: red;   // only changes to red if the mouse is hovering.
}
于 2012-11-10T07:28:03.490 に答える
0

これを行うには、JavaScript または jQuery を使用する必要があります。ただし、div の上にマウスを置いたときに div の色を変更する方が簡単です。

これをあなたに追加してください<head>：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

タグにクラスを追加する必要があります。<a>このクラスを呼び出しましょうmenu-link。したがって、代わり<a href="#">Link 1</a>に<a href="#" class="menu-link">Link 1</a>.

これで、次の jQuery コードを に追加できます<head>。

<script>
     $('a.menu-link').hover(function()
     {
         $(this).parent().css('background-color', 'red');
     }, function()
     {
         $(this).parent().css('background-color', 'white');
     }
</script>

この jQuery コードは、<a>タグの親 (この場合は自分の<div>タグ) の背景色を変更します。

于 2012-11-10T07:35:07.560 に答える