CSS спрайты и подсветка - можно ли применить свойство "hover" сразу к нескольким элементам? - PullRequest
Новая
       6

CSS спрайты и подсветка - можно ли применить свойство "hover" сразу к нескольким элементам?

1 голос
/ 10 июля 2010

У меня есть два изображения спрайта. Одно изображение содержит тело закругленной кнопки, а также другие состояния (зависание, нажатие и т. Д.), А другое содержит самую левую кривую изображения.

Я использую их, поэтому мне не нужно иметь несколько изображений кнопок на моей веб-странице, эти кнопки можно масштабировать до любого размера. 

 <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 ]

2 голосов
/ 10 июля 2010

Вы пробовали #search_tips:hover span?

1 голос
/ 10 июля 2010

Для начала, когда вы наводите курсор на элемент, только этот элемент получает событие hover css, а не что-либо позади него. Однако вы можете скрыть элемент при наведении, что вызывает наведение на элемент позади него.

0 голосов
/ 10 июля 2010

Убедитесь, что вы используете псевдокласс :hover перед элементом span для правильной работы наведения: 

#search_tips:hover span, #advanced_search_button:hover span

Я также думаю, что вам нужно использовать doc_button_left.png в качестве фона span, если вы используете стандартную технику раздвижных дверей. Я не уверен на 100% в этом, но если у вас возникнут проблемы, возможно, вы захотите сделать это.

0 голосов
/ 10 июля 2010

Не уверен на 100%, отвечает ли он на ваш вопрос, но :hover также может быть родительским селектором: 

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

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

эти правила будут оба применяться в момент наведения search_tips на *. 1008 *

...