2

HTMLがあるとしましょう

<ul>
  <li><a>Item 1</a></li>
  <li><a>Item 2</a></li>
</ul>

そしてCSS

li { padding-left: 20px; background-image: url(arrow.png); }
li:hover { background-image: url(arrow-hover.png); }

ホバー時に background-image を arrow.png に戻したいですli > a。
私はこのようなものを探しています。

li:hover:not(this > a:hover) { background-image: url(arrow-hover.png); }
4

3 に答える 3

1

どうやらCSS3でこれを行う方法はありません。（オズワルドとエヴァンに感謝）

同様のソリューションを探している人は、この JavaScript を使用する必要がありました。

$("li").hover(function () { $(this).addClass('hover'); },
              function () { $(this).removeClass('hover'); });
$("li > *").hover(function () { $(this).parent().removeClass('hover'); },
                  function () { $(this).parent().addClass('hover'); });

CSSセレクターをli:hoverからli.hover（または上記で使用する任意のクラス）に変更します

li.hover { background-image: url(arrow-hover.png); }
于 2013-03-12T04:07:50.673 に答える
0

jQuery を使ってからしばらく経ちましたが、

$("li > a").hover(
  function(){
    $this.parent("li").css("background-image", "url(arrow-hover.png)")
  },
  function(){
    $this.parent("li").css("background-image", "url(arrow.png)")
  }
);
于 2013-03-12T20:21:34.860 に答える
0

実際には、li 内のタグにカーソルを合わせると、2 つのホバー アクションがトリガーされます。1 つは親の li 用で、もう 1 つはタグ用です。

li >a:hover { background-image: url(arrow-hover.png) !important; }

テストされていませんが、試すことができます...

于 2013-03-12T00:49:22.117 に答える