CSS懸停滑出問題

我在頁面的兩側都有兩個滑出菜單。它們在懸停時都完全滑出，但由於某種原因，當我將鼠標懸停在右側時，左側滑出也是如此。我對編碼感到陌生，所以不知道爲什麼會發生這種情況。CSS懸停滑出問題

這是我的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>

如果有人能請幫助我將非常感激。

來源

2014-01-14 user3193825

你缺少結束</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你走讓你的代碼整潔，可以幫助你發現問題，他們成爲錯誤之前。

來源

2014-01-14 12:19:12

編碼時它有助於標籤添加到您的代碼，所以你可以看到的邏輯流程，基本上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>

來源

2014-01-14 12:25:42

CSS懸停滑出問題

回答

相關問題