How can I reverse selector combination in CSS?

Question

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?

Relevant code **should be in question**. Do not work around the quality check by formatting link as code block. — Harry, Jan 19 '16 at 12:41
I still don't get how to use jsfiddle right in Stackoverflow. It is not realy straight forward. Paste that stuff in to the post. — Pete, Jan 19 '16 at 12:44
http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector — Lalji Tadhani, Jan 19 '16 at 12:48
@Pete It is better than JSBin and JSFiddle. Just paste the HTML, CSS, JavaScript. Similar to JSFiddle. `:)` Check my answer for a solution. — Praveen Kumar Purushothaman, Jan 19 '16 at 12:49
@LaljiTadhani That helps like how a stone helps you with iPhone installation! `:P` — Praveen Kumar Purushothaman, Jan 19 '16 at 12:51

score 2 · Accepted Answer · answered Jan 19 '16 at 12:49

2

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

Give a parent div.
Apply display: inline-block.
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>

answered Jan 19 '16 at 12:49

Praveen Kumar Purushothaman

164,888
24
203
252

That looks like what I was searching for – Pete Jan 19 '16 at 12:53
1

I did ... stackoverflow deter the users from accept in the first 2 min ;) – Pete Jan 19 '16 at 12:58
@Pete It is 15 min gap. `:D` – Praveen Kumar Purushothaman Jan 19 '16 at 14:09
Don't get why this was downvoted when it's a fine working solution. (Although not sure why `display: inline-block` is needed?) – Jordan Gray Jan 19 '16 at 14:20
@JordanGray That wraps the whole thing, with the same width as the contents. So the hover is not active above the range. – Praveen Kumar Purushothaman Jan 19 '16 at 14:28
@PraveenKumar Aaah, gotcha! Nice. – Jordan Gray Jan 19 '16 at 21:15

How can I reverse selector combination in CSS?

1 Answers1