我有 2 个滑出式菜单,一个位于页面的两侧。它们都在悬停时完美地滑出,但由于某种原因,当我将鼠标悬停在右手上滑出时,左手也滑出。我是编码新手,所以不明白为什么会这样。
这是我的 HTML 和 CSS
CSS:
#slideout {
position: fixed;
top: 50%;
left: 0;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
}
#slideout_inner {
position: fixed;
top: 50%;
left: -268px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
}
#slideout:hover {
left: 250px;
}
#slideout:hover #slideout_inner {
left: 0;
}
#slideout2 {
position: fixed;
top: 50%;
right: 0px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
}
#slideout_inner2 {
position: fixed;
top: 50%;
right: -268px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
}
#slideout2:hover {
right: 268px;
}
#slideout2:hover #slideout_inner2 {
right: 0;
}
HTML:
<div id="slideout">
<img src="Images/pre-hover.gif" width="70" height="80" />
<div id="slideout_inner">
<img src="Images/contact-about.gif" width="268" height="80" usemap="#Map" border="0" />
<map name="Map" id="Map">
<area shape="rect" coords="10,7,262,37" href="Contact.html" />
<area shape="rect" coords="8,48,266,76" href="About.html" />
</map>
</div>
<div id="slideout2">
<img src="Images/pre-hover2.gif" width="70" height="167" />
<div id="slideout_inner2">
<img src="Images/slideout.gif" width="268" height="167" />
</div>
如果有人可以帮助我,我将不胜感激。
最佳答案
您缺少关闭 </div>
标签:
<div id="slideout">
<img src="Images/pre-hover.gif" width="70" height="80" />
<div id="slideout_inner">
<img src="Images/contact-about.gif" width="268" height="80" usemap="#Map" border="0" />
<map name="Map" id="Map">
<area shape="rect" coords="10,7,262,37" href="Contact.html" />
<area shape="rect" coords="8,48,266,76" href="About.html" />
</map>
</div>
</div> <!-- Here -->
<div id="slideout2">
<img src="Images/pre-hover2.gif" width="70" height="167" />
<div id="slideout_inner2">
<img src="Images/slideout.gif" width="268" height="167" />
</div>
</div> <!-- And here -->
查看此 JSFiddle
Indenting your code保持代码整洁,并可以帮助您在问题变成错误之前发现问题。
关于html - CSS Hover 滑出问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21113320/