web-dev-qa-db-ja.com

カスケード<li> -CSSを使用したホバー効果

単純なhtmlの順序なしリストがあります。

<ul>
    <li>Item 1</li>
    <li>
        Group 1
        <ul>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </li>
</ul>

CSSを使用して、マウスがアイテムまたはグループの上にあるときに簡単な効果を作成したいと思います。

li:hover
{
    background-color:#ff0000;
}

「グループ1」または「アイテム1」（グループに含まれていない）では非常にうまく機能します-マウスを上に移動すると、色が変わります。しかし、「アイテム2」または「アイテム3」の上に移動すると、「グループ1」も強調表示されたままになります（赤い背景）。この場合、「アイテム2」または「アイテム3」のみを強調表示します。

誰かがこれを行う方法を考えていますか？

ご協力いただきありがとうございます！

===============================編集

<ul>
    <li>Item 1</li>
    <li>
        Group 1
        <ul>
            <li>Item 2</li>
            <li>Group 2
                <ul>
                    <li>Item 3</li>
                    <li>Item 4</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

マウスオーバーxxxはyyyを強調表示する必要があります
xxx-> yyy
Item1-> Item1
Group1-> Group1、Item2、Group2、Item3、Item4
Item2-> Item2
Group2-> Group2、Item3、Item4
Item3-> Item3
Item4-> Item4

http://image-upload.de/image/r76d79/1c7af56a19.png を参照してください。

htmlcsshoverhtml-lists
8
raisyn

JQueryのドキュメントでおそらく最良の解決策を見つけました。 http://api.jquery.com/event.stopPropagation/

$('li').mouseover(function(e)
{
    e.stopPropagation();
    $(this).addClass('hover');
});

$('li').mouseout(function()
{
    $(this).removeClass('hover');
});
1
raisyn

このソリューションは純粋なHTML/CSSソリューションではありませんが、機能します。 JavascriptライブラリjQueryを使用します。
http://jsfiddle.net/XP3Vp/

これをページのヘッドセクションに配置します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$('li').mouseover(function()
  {
          if ($('li ul li:hover').length) 
          {
              $('li ul li:hover').css('background','red'); 
          }
          else
          {
               $('li:hover').css('background','red'); 
          }
  });
$('li').mouseout(function()
  {
          $(this).css('background', 'transparent');
  });
</script>

カーソルをGroup 1の上に移動するときに、基になるリストアイテムも強調表示されないようにする場合は、これを使用します。 http://jsfiddle.net/CwhhN/

3
RobinJ

最善の方法は、ulも色付けすることです。

ul{background-color:#fff;}
li:hover
{
    background-color:#ff0000;
}

このようなもの http://jsfiddle.net/gaby/DxsDa/ ただし、group 1テキストは引き続き強調表示されます。

あるいは、無効なhtmlに頼ることもできますが、明らかな理由でそれをお勧めしません。 http://jsfiddle.net/gaby/DxsDa/1/

1
Gabriele Petrioli

Group 1にはItem 2が含まれています。したがって、Item 2をホバリングしているときは、Group 1もホバリングしています。

したがって、CSSを使用すると、意図的にHTMLを誤ってフォーマットしない限り、必要なことはできません。

ただし、JSを使用するとそこに到達できます。
これが許容できる場合は、 @ RobinJの回答 を参照してください。

1
ANeves