Question

我是网页设计的新手，我正在开展一个小项目，但我遇到了一个问题，我将不胜感激。

所以我有三个div容器，我用它们来显示相册内的照片缩略图，我给它们每个人一个CSS：悬停选择器，我希望所有三个类在鼠标时一次运行超过任何一个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);
}

如果你不明白我的意思，我可以解释一下。

Answer 1

没有办法只在CSS上做。并且Hover不适用于DIV。它用于A，UL＆gt; 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>

如何一次运行多个css选择器类？

1 个答案: