Question

我在页面的两侧各有一个滑出式菜单。它们在悬停时都完美地滑出，但出于某种原因，当我将鼠标悬停在右侧滑出左侧时，它也会滑出。我是编码的新手，所以不明白为什么会发生这种情况。

这是我的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随着你的进展保持你的代码整洁，并可以帮助你在它们成为错误之前发现问题。

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

CSS Hover滑出问题

2 个答案: