html - CSS Hover 滑出问题

Question

我有 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>

如果有人可以帮助我，我将不胜感激。

Answer 1

您缺少关闭 </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保持代码整洁，并可以帮助您在问题变成错误之前发现问题。