Confusion about the ~ selector,

Question

Okay so I'm a self-taught coder and I often run into things that I should understand but just.. Don't, for some reason. I keep running into this issue where I need to make it so that I can hover over one element to access another usually underneath it or in other cases I've needed it to create a nice drop down list.. Things like that. So I had a friend explain to me that I should build something using the ~ selector but I don't remember exactly how to write it or even how it works. I've looked up different demonstrations but never really understood it.

What I have is this: http://codepen.io/Peechiee/full/vEZmMY/

If you go to the bio section, I'm trying to make it so that when I hover over the GIF, it'll show the element underneath. Problem is, no matter how I try to set up the rule set, it's not working for me. I can't begin to imagine why that is since I don't know how to use this selector.

What I have for that section is this:

    .bio1 {
  height:50%;
  width:50%;
  position:absolute;
  background-color:transparent;
  color:#FFFFFF;
  z-index:71;
  top:7%;
  left:0%;
  overflow:hidden;
}


.bio2 {
  height:50%;
  width:50%;
  left:0%;
  top:7%;
  background-color:GREY;
  color:#FFFFFF;
  font-family:MS Gothic;
  font-size:8pt;
  z-index:70;
  position:absolute;
}

.bio1:hover ~ .bio2 {  }

I haven't placed any declarations for that last rule set because in complete honesty I'm not even sure what that does. I was just wondering if someone could please fix this for me and maybe explain to me how this works so that I can use it in the future? By the way, for the site I'm using this on I'm not allowed to use Java so please avoid that. Thanks in advance. :D

possible duplicate of [What does the CSS ~ (tilde/squiggle/twiddle) selector do?](http://stackoverflow.com/questions/10782054/what-does-the-css-tilde-squiggle-twiddle-selector-do) — t.niese, Jan 27 '15 at 08:24
I bet no one uses Java on their sites anymore. (Java has nothing to do with JavaScript, except that they share a part of the name) — t.niese, Jan 27 '15 at 08:28

Fabrizio Calderan · Answer 1 · 2015-01-27T08:35:18.677

0

2 main issues:

you have set a very small font-size on .bio2, so you need to increase it if you want to see something
a z-index is missing on .bio2 element

So, when you hover .bio1 you could just set a z-index on .bio2. Since .bio1 has z-index: 71 you need to pick an higher value.

.bio1:hover ~ .bio2 {  
  z-index : 72;
}

Fork: http://codepen.io/anon/pen/KwqOPr

edited Jan 27 '15 at 08:35

answered Jan 27 '15 at 08:29

Fabrizio Calderan

120,726
26
164
177

I can see the text size but it still spazzes out when hovering over the GIF. I'm trying to move bio1 to the right to show and use bio2 underneath which will have content in it, but with the way it's set up now, bio1 goes nuts when trying to hover over it. I didn't set bio1:hover or put anything in the .bio1:hover ~ .bio2 rule set because I don't know how to set this up to do what I want it to. But once I can visually see how the setup works, I'll finally be able to understand it myself. – White Rabbit Jan 28 '15 at 13:42

Confusion about the ~ selector,

1 Answers1