1

2つのスプライト画像があります。1つの画像には、丸みを帯びたボタンの本体と他の状態（ホバー、クリック、電気ショック療法）が含まれ、もう1つの画像には画像の左端の曲線が含まれます。

私はこれらを使用しているので、Webページに複数のボタン画像を表示する必要はありません。これらのボタンは任意のサイズに拡大縮小できます。

 <div  id="search_tips"><span>Search Tips</span></div>

およびCSS

#advanced_search_button, #search_tips{
   background: url("graphics/doc_button_left.png") no-repeat scroll 0 0 transparent !important;
   color:#666666 !important;
   display:block !important;
   float: right !important;
   padding-left: 5px;
   padding-right: 6px;
   padding-top: 0px;
   margin-right: 16px;
   height: 22px;
   overflow: hidden !important;
}


#advanced_search_button span, #search_tips span{
 background: url("graphics/doc_button.png") no-repeat scroll 100% 0 transparent !important;
 padding: 2px 9px 5px 0 !important;
 line-height: 19px;
 display:block !important;
 float: left;

}



#search_tips:hover, #advanced_search_button:hover {
    background-position: 0 -22px !important;
}

#search_tips span:hover, #advanced_search_button span:hover{
    background-position: 100% -22px !important;
}

、（アイコンの大部分）を含むdivの部分にカーソルを合わせると、スプライトの両方の部分に「ホバー」スタイルが適用されます。ただし、「画像のチャックだけが表示される前に画像の一部にカーソルを合わせると、「ホバー」スタイルが適用されます。

私ができるようにしたいのは、親divにホバースタイルが適用されている場合は常に、スパンの「ホバー」スタイルをアクティブにすることです。

何かアドバイス？

ありがとう

4

4 に答える 4

2

試しました#search_tips:hover spanか？

于 2010-07-09T22:06:37.293 に答える
1

まず、アイテムにカーソルを合わせると、そのアイテムだけが hover css イベントを取得し、その背後には何もありません。 ただし、ホバー時に要素を非表示にすることができます。これにより、その背後にある要素のホバーがトリガーされます。

于 2010-07-09T22:08:15.850 に答える
0

それがあなたの質問に答えるかどうかは100％確信が持てません:hoverが、親セレクターにもなる可能性があります：

#search_tips:hover span.classname1
  {
    ......
  }

 #search_tips:hover span.classname1 
  {
     .......
  }

これらのルールは、ホバーした瞬間に両方ともsearch_tips適用されます。

于 2010-07-09T22:06:58.913 に答える
0

:hoverホバーが正しく機能するように、スパン要素の前に擬似クラスを使用してください。

#search_tips:hover span, #advanced_search_button:hover span

また、標準的なスライド ドア テクニックを使用している場合はdoc_button_left.png、背景としてを使用する必要があると思います。spanこれについて 100% 確信があるわけではありませんが、引き続き問題が発生する場合は、その切り替えを行うことをお勧めします。

于 2010-07-09T22:14:00.683 に答える