CSS Hover 滑出问题答案

【问题标题】：CSS Hover slide out issueCSS Hover 滑出问题
【发布时间】：2014-01-14 12:13:54
【问题描述】：

我在页面的两侧有 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>

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

【问题讨论】：

标签： html css

【解决方案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 可以让你的代码保持整洁，并且可以帮助你在问题变成错误之前发现它们。

【讨论】：

【解决方案2】：

在编码时，将标签添加到代码中会有所帮助，这样您就可以看到逻辑流程，基本上，slideout2 包含在幻灯片中，这是带有标签的旧代码：

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

【讨论】：