我是网页设计的新手,我正在做一个小元素,但我遇到了一个问题,我将不胜感激任何帮助。
所以我有三个 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);
}
如果你不明白我想要什么,我可以解释更多。
最佳答案
没有办法只在 CSS 上做到这一点。而 Hover 不适用于 DIV。它适用于 A、UL > LI...
您必须了解 Javascript 或 jQuery。
鼠标悬停在 1 个 div 上,然后为所有 DIVS 移动 $.AddClass(Active Class),当鼠标悬停在 Div 上时,为所有 DIVS 移动 $.RemoveClass。
如果您不了解 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>
关于class - 如何一次运行多个 css 选择器类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6685898/