如何在其他div被佔用時影響其他div屬性？

這是我在這裏的第一篇文章，生病嘗試儘可能清楚，並希望我遵循網站的規則。如何在其他div被佔用時影響其他div屬性？

不久前，我開始玩一些HTML/CSS，我很擅長但不夠我猜，我希望在這裏得到一些幫助。

我試圖建立一個導航菜單和它的一個功能，我想它已經是當我將鼠標懸停在「戶口」按鈕，它應該分裂菜單在中間，展現出新部分用戶可以登錄他或她的帳戶。

這是我走到這一步，出於某種原因，我不能讓效果懸停在「戶口」div但美國能源部的工作時，我申請的整個頂部div懸停效果（其中當「賬戶div是其中一部分）嘗試了所有。‘鏈接’方式提出in this post，仍然一無所獲......還有最後一件事：當我在.middle div做overflow: hidden;它增加了頂部和底部divs之間的空間

。

我非常感謝任何幫助，如果可以將它留在CSS水平l（沒有任何jQuery或任何其他編碼）

在此先感謝，託尼。

.container { 
 
    width: 560px; 
 
    height: auto; 
 
} 
 

 
.top { 
 
    height: 50px; 
 
    background-color: red; 
 
} 
 

 
.top-L { 
 
    float: right; 
 
    padding: 5px 20px; 
 
} 
 

 
.top-R { 
 
    float: right; 
 
    padding: 5px 20px; 
 
    height: 50px; 
 
    display: block; 
 
} 
 

 
.middle { 
 
    height: 0px; 
 
    width: 560px; 
 
    overflow: hidden; 
 
    background-color: blue; 
 
    transition: .4s ease; 
 
} 
 

 
.bottom { 
 
    height: 50px; 
 
    background-color: green; 
 
} 
 

 
.top:hover + .middle { 
 
    height: 50px; 
 
    transition: .4s ease; 
 
} 
 

 
.middle:hover { 
 
    height: 50px; 
 
}

<html> 
 
<body style="font-family: sans-serif; background-color: #ccc;"> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="top"> 
 
    <div class="top-L">Other</div> 
 
    <div class="top-R">Account</div> 
 
    </div> 
 
    <div class="middle"> 
 
    <div> 
 
     <input type="text" placeholder="Enter Username" name="uname" required> 
 
     <input type="password" placeholder="Enter Password" name="psw" required> 
 
    </div> 
 
    </div> 
 
    <div class="bottom"></div> 
 
</div> 
 
    
 
</body> 
 
</html>

來源

2017-08-09 Tony Mor

你不能只用純CSS按鈕的效果，需要使用Javascript爲。原因是登錄框不是按鈕的同級，而是其父級。 – Gerard

@Gerard技術上你可以根據需求使用絕對位置。 – William

@Tony，如果我點擊而不是懸停怎麼辦？ – Aslam

修訂ANSWER

你所尋找的是不可能的，當前的結構。但是，我們可以通過Click來代替Hover。 隨着一些變化:)。這不是一個完美的解決方案，但應該適合你的情況。

*{ 
 
\t box-sizing: border-box; 
 
} 
 

 
.container { 
 
    width: 560px; 
 
    height: auto; 
 
} 
 

 
.top { 
 
    /* height: 50px; */ 
 
    background-color: red; 
 
\t display: flex; 
 
\t justify-content: flex-end; 
 
} 
 

 
.top-L label, .top-R label{ 
 
\t padding: 20px; 
 
} 
 

 
.top-L { 
 
    order: 1; 
 
\t padding: 20px; 
 
} 
 

 
.top-R { 
 
    padding: 20px; 
 
} 
 

 
.middle { 
 
    height: 0px; 
 
    width: 560px; 
 
    overflow: hidden; 
 
    background-color: blue; 
 
    transition: .4s ease; 
 
} 
 

 
.bottom { 
 
    height: 50px; 
 
    background-color: green; 
 
} 
 
.top:hover + .middle { 
 
    /* height: 50px; */ 
 
    transition: .4s ease; 
 
\t 
 

 
} 
 
#account{ 
 
\t display: none; 
 
} 
 
#account:checked + .middle{ 
 
\t height: 50px; 
 
\t padding: 10px; 
 
} 
 

 
.middle:hover { 
 
    /* height: 50px; */ 
 
}

<div class="container"> 
 
    <div class="top"> 
 
    <div class="top-L">Other</div> 
 
    <div class="top-R" ><label for="account">Account</label> </div> 
 
    </div> 
 
    <input type="checkbox" id="account"/> 
 
    <div class="middle"> 
 
    <div> 
 
\t \t \t 
 
     <input type="text" placeholder="Enter Username" name="uname" required> 
 
     <input type="password" placeholder="Enter Password" name="psw" required> 
 
    </div> 
 
    </div> 
 
    <div class="bottom"></div> 
 
</div>

來源

2017-08-09 07:05:09 Aslam

*它應該分裂中間的菜單，並顯示一個新的部分，用戶可以登錄到他或她的帳戶* – Gerard

非常感謝你！它現在令人驚歎！ –

如果我是正確的，這將幫助你，

nav > ul > li { 
 
    display: inline-block 
 
} 
 
nav > ul > li ul { 
 
    visibility: hidden; 
 
    position: absolute; 
 
    top: 105%; 
 
    left: 0; 
 
    transition: 0.2s 1s; 
 
} 
 
nav > ul > li:hover ul { 
 
    visibility: visible; 
 
    transition-delay: 0s; 
 
} 
 
nav ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
nav li { 
 
    width: 100px; 
 
    background: #eee; 
 
    margin: 2px; 
 
    position: relative; 
 
    padding: 10px; 
 
} 
 
nav a { 
 
    display: block; 
 
    
 
} 
 

 
body { 
 
    padding: 10px; 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="">Last</a></li> 
 
    <li><a href="">one</a></li> 
 
    <li><a href="">is</a></li> 
 
    <li> 
 
     Dropdown 
 
     <ul> 
 
     <li><a href="#">One</a></li> 
 
     <li><a href="#">Two</a></li> 
 
     <li><a href="#">Three</a></a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

來源

2017-08-09 07:33:28

不是我在找什麼，不過謝謝 –

@Tony鐵道部對現有的CSS做了一些修正。我相信這是你想要的。

.top-R { 
    float: right; 
    padding: 5px 20px; 
    display: block; 
}

和

.middle div { 
    padding-left: 10px; 
    padding-top: 15px; 
}

來源

2017-08-09 13:14:15 vagelis

謝謝！這確實幫助了差距:) –

很高興我能幫忙！ :-) – vagelis

如何在其他div被佔用時影響其他div屬性？

回答

相關問題