1

このドロップダウンメニューがあり、CSSを使用してホバーしているアイテムを「ハイライト」しています。私の質問は、ドロップダウンカテゴリを持つアイテムにのみこの下向き矢印を表示したいということです。以下は、HTMLでの呼び出し方法です。'subitem'タグを付けました。そこで、矢印を表示するために次のCSSを作成しました。問題は、.subitemプロパティが一般的なホバープロパティを上書きするため、ホバーしたときにのみ矢印が表示されることです。両方を表示する方法はありますか？

ここに画像の説明を入力してください

#cssmenu  > ul > li.subitem 

{
    padding-right:5px;
background: url(images/arrow2.png) no-repeat;

background-position-y: 10%;

}


#cssmenu  > ul  li.subitem:hover

{

background: url(images/arrow2.png) no-repeat;


}

<div id='cssmenu'>
<ul>
   <li><a href='index.html'><span>Home</span></a></li>
    <li class='subitem'><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li><a href='#'><span>Product 2</span></a></li>
      </ul>
   </li>

#cssmenu  > ul li:hover{


    padding : 3 px, 1 px;
background: #828a91; /* Old browsers */
background: -moz-linear-gradient(top,  #828a91 0%, #636363 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#828a91), color-stop(100%,#636363)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #828a91 0%,#636363 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #828a91 0%,#636363 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #828a91 0%,#636363 100%); /* IE10+ */
background: linear-gradient(to bottom,  #828a91 0%,#636363 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#828a91', endColorstr='#636363',GradientType=0 ); /* IE6-9 */
 -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 -3px 0 rgba(255,255,255,.2), 0 1px 0 rgba(0,0,0,.1);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 -3px 0 rgba(255,255,255,.2), 0 1px 0 rgba(0,0,0,.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 -3px 0 rgba(255,255,255,.2), 0 1px 0 rgba(0,0,0,.1);

}
4

2 に答える 2

2

#cssmenu > ul li.subitem:hoverルールを次のように変更します。

background: #828a91; /* Old browsers */
background: url(images/arrow2.png) no-repeat, -moz-linear-gradient(top,  #828a91 0%, #636363 100%); /* FF3.6+ */
background: url(images/arrow2.png) no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#828a91), color-stop(100%,#636363)); /* Chrome,Safari4+ */
background: url(images/arrow2.png) no-repeat, -webkit-linear-gradient(top,  #828a91 0%,#636363 100%); /* Chrome10+,Safari5.1+ */
background: url(images/arrow2.png) no-repeat, -o-linear-gradient(top,  #828a91 0%,#636363 100%); /* Opera 11.10+ */
background: url(images/arrow2.png) no-repeat, -ms-linear-gradient(top,  #828a91 0%,#636363 100%); /* IE10+ */
background: url(images/arrow2.png) no-repeat, linear-gradient(to bottom,  #828a91 0%,#636363 100%); /* W3C */

これは、CSS3backgroundでは、省略形の定義をコンマで区切ることにより、複数のsを指定できるという事実を利用しています。複数の背景の指定について詳しく読むことができる1つのWebリソースは次のとおりです。小さなリンク。
お役に立てば幸いです。

于 2012-08-17T22:40:59.407 に答える
1

.subitem：hoverスタイルについて、以下のようなホバースタイルを繰り返す必要があります

#cssmenu  > ul  li.subitem:hover
{

padding : 3 px, 1 px;
background: #828a91 url(images/arrow2.png) no-repeat; /* Old browsers */
background: -moz-linear-gradient(top,  #828a91 0%, #636363 100%), url(images/arrow2.png) no-repeat; /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#828a91), color-stop(100%,#636363)),url(images/arrow2.png) no-repeat; /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #828a91 0%,#636363 100%),url(images/arrow2.png) no-repeat; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #828a91 0%,#636363 100%),url(images/arrow2.png) no-repeat; /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #828a91 0%,#636363 100%),url(images/arrow2.png) no-repeat; /* IE10+ */
background: linear-gradient(to bottom,  #828a91 0%,#636363 100%),url(images/arrow2.png) no-repeat; /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#828a91', endColorstr='#636363',GradientType=0 ); /* IE6-9 */
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 -3px 0 rgba(255,255,255,.2), 0 1px 0 rgba(0,0,0,.1);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 -3px 0 rgba(255,255,255,.2), 0 1px 0 rgba(0,0,0,.1);
box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 -3px 0 rgba(255,255,255,.2), 0 1px 0 rgba(0,0,0,.1);

}

注意深く見ると、トリックは同じcssプロパティに2つの画像を設定することです

background: <image1>, <image2>;

つまり、

background: -moz-linear-gradient(top,  #828a91 0%, #636363 100%), url(images/arrow2.png) no-repeat;
于 2012-08-17T22:40:06.113 に答える