CODEWITHSUNDEEP
htmlcsscss-selectors
Pete
Pete

Reputation: 564

How can I reverse selector combination in CSS?

In the current project I use to two html tags. The second one is hidden by default. If you hover the first one the second one will appear. If you head over the the second now visible one it stays open.

#button{
  background:#050;
  width:200px;
  height:30px;
  line-height:30px;
  text-align:center;
  cursor:pointer;
}
#button{
  color:white;
  text-decoration:none;
}

#button:hover{
  color:#ff4;
  text-decoration:none;
}

#subfield{
  width:500px;
  height:300px;
  background:#777;
}

#button + #subfield{
  display:none;
}

#button:hover + #subfield{
  display:block;
}

#button + #subfield:hover{
  display:block;
}
<div id="button">Menu Button</div>
<div id="subfield"></div>

That works fine. But the first html tag has a hover effect itself. How can I keep this hover effekt while heading over to the other html tag?

Upvotes: 2

Views: 3558

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167240

You don't have a parent selector or previous selector in CSS. Simple fix, give :hover for the parent of the two:

  1. Give a parent div.
  2. Apply display: inline-block.
  3. Give the :hover to the parent, instead of the button.

#parent {
  display: inline-block;
}
#button {
  background: #050;
  width: 200px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
}
#button {
  color: white;
  text-decoration: none;
}
#parent:hover #button {
  color: #ff4;
  text-decoration: none;
}
#subfield {
  width: 500px;
  height: 300px;
  background: #777;
}
#button + #subfield {
  display: none;
}
#button:hover + #subfield {
  display: block;
}
#button + #subfield:hover {
  display: block;
}
<div id="parent">
  <div id="button">Menu Button</div>
  <div id="subfield"></div>
</div>

Upvotes: 2

Related Questions