Как запустить несколько классов CSS селекторов одновременно? - PullRequest
Новая
       8

Как запустить несколько классов CSS селекторов одновременно?

0 голосов
/ 14 июля 2011

Я новичок в веб-дизайне и работаю над небольшим проектом, но столкнулся с проблемой, и я был бы признателен за любую помощь.

Итак, у меня есть три контейнера div, и я 'Я использую их для показа миниатюр фотографий внутри альбома, и я дал каждому из них селектор CSS: hover, и я хочу, чтобы все три класса запускались одновременно, когда указатель мыши находится над любым из элементов div.Я попытался смоделировать событие при наведении курсора мыши, но оно не сработало, и я попытался установить атрибут с помощью javascript, который тоже не сработал.Вот мое css. 

 #frame {
border: solid 2px black;
background-image:url(cpHDFLI6_mini.jpg);
background-repeat:no-repeat;


position:absolute;
top:87px;
right:183px;
left:auto;
display: block;
width: 60px;
height: 70px;
-o-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);

  }

  #frame1 {
border: solid 2px black;
background-image:url(20397.jpg);
background-repeat:no-repeat;


position:absolute;
top:75px;
right:228px;
left:auto;
display: block;
width: 60px;
height: 70px;
z-index:1;

 }

 #frame2 {
border: solid 2px black;
background-image:url(candle.jpg);
background-repeat:no-repeat;


position:absolute;
top:87px;
right:273px;
left:auto;
display: block;
width: 60px;
height: 70px;
-o-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
transform: rotate(-30deg);
z-index:0;

}
 #frame2:hover {  
   opacity: 1;

   -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, 
   from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));

   -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
   -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
   box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}
#frame1:hover {  
   opacity: 1;


  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom,  
  from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));

 -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
 -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}
#frame:hover {  
  opacity: 1;

  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom,
  from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));

 -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
 -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}

Если вы не понимаете, чего я хочу, я могу объяснить больше.

1 Ответ

1 голос
/ 14 июля 2011

НЕТ Способ сделать это только на CSS. И Hover не распространяется на DIV. Это для A, UL> LI ...

Вы должны знать о Javascript или jQuery.

При наведении мыши на 1 div, затем $ .AddClass (активный класс) для ВСЕХ DIVS, а когда мышь вне Div, $ .RemoveClass для ВСЕХ DIVS.

Если вы не знаете о jQuery или Javascript, вы можете спросить здесь, мы можем помочь.

Вы можете скопировать и вставить его для DIv2 и Div3 о перемещении мыши и над ней тоже. Если вы понимаете в DOM, вы можете попробовать $ ("div [name = 3DIV]"). для более короткого кода, однако я не уверен, что вы понимаете скрипт или нет, поэтому я написал простой скрипт, но длинный код. 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" /></script>

<script language="javascript">
$(document).ready(function() {

$("#divID1").mouseover(function() {
    $("#divID1").addClass("ACTIVE_CLASS");
    $("#divID2").addClass("ACTIVE_CLASS");
    $("#divID3").addClass("ACTIVE_CLASS");                  
});
$("#divID1").mouseout()(function() {
    $("#divID1").removeClass("ACTIVE_CLASS");
    $("#divID2").removeClass("ACTIVE_CLASS");
    $("#divID3").removeClass("ACTIVE_CLASS");                   
});
}); 
</script>
...