How to effect other div properties when a different div is hovered on?

Question

this is my 1st post over here, ill try to be as clear as possible and hope I'm following the site's rules.

Not so long ago I started to play a little bit with some HTML/CSS, I got pretty good at it but not enough I guess and I hope to get some help over here.

I'm trying to build a navigation menu and one of it's features I would like it to have is when I hover over the "Account" button it should split the menu in the middle and show a new section where the user can log-in into his or hers account.

This is what I got so far and for some reason I cant make the effect when hovering over the "Account" div but it doe's work when I apply the hover effect on the entire top div (where the "Account div is a part of). tried all "linking" methods suggested in this post and still nothing... Also last thing: When i did overflow: hidden; on the .middle div it added a space between the top and bottom divs.

I would highly appreciate any help and if it's possible to leave it at the CSS level (without any jQuery or any other coding)

Thanks in advance, Tony.

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

You cannot get the effect for the button only with pure CSS, you need Javascript for that. The reason is that the login box is not a direct following sibling of the button, but of its parent. — Gerard, Aug 09 '17 at 07:04
@Gerard technically you could use position absolute maybe depending on the requirements. — Lime, Aug 09 '17 at 07:09
@Gerard I consulted with a developer friend and he told me the same about using Javascript, I really want to keep it in pure CSS so I'll probably go with the solution hunzaboy suggested. — Tony Mor, Aug 10 '17 at 11:51

Aslam · Accepted Answer · 2017-08-09T07:27:30.637

UPDATED ANSWER

What you are looking for is not possible with your current structure. However, we can do it via Click, Instead of Hover. With some changes :). It is not the perfect solution but should work in your situation.

*{
 box-sizing: border-box;
}

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

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

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

.top-L {
  order: 1;
 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;
 

}
#account{
 display: none;
}
#account:checked + .middle{
 height: 50px;
 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>
   
      <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>

* it should split the menu in the middle and show a new section where the user can log-in into his or hers account* — Gerard, Aug 09 '17 at 07:08

score 0 · Answer 2 · answered Aug 09 '17 at 07:33

If I am right this will help you,

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>

score 0 · Answer 3 · answered Aug 09 '17 at 13:14

0

@Tony Mor made some correction on your existing css. I believe it's what you want.

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

and

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

answered Aug 09 '17 at 13:14

vagelis

479
2
12

Thanks! that did helped with the gap :) – Tony Mor Aug 10 '17 at 11:52
Glad I could help! :-) – vagelis Aug 10 '17 at 12:05

How to effect other div properties when a different div is hovered on?

3 Answers3