1

I've been trying to get a overflow box to show up only when hovering over inside a certain part of the text inside a list. It works, but for some reason it makes the other li disappear. This is my code:

#firstid {
  text-decoration: underline;
  color: olivedrab;
}

#secondid {
  display: none;
  background-color: lightblue;
  width: 110px;
  height: 110px;
  overflow: auto;
}

#firstid:hover~#secondid {
  display: block;
}
<ol>
  <li>
    <a id="firstid">Text</a>
    <a id="secondid">Text</a>
  </li>
  <li>Text</li>
</ol>

It works correctly, but what should come after that in my list disappears. It's probably because of some stupid mistake, but I've been stuck on that for a while and couldn't find the answer online. Any help would be really apreciated appreciated (:

ElDudo
  • 11
  • 3
  • 1
    Should those `` be `` instead? That looks like it could cause unpredictable behavior. – Aaron Klein Nov 26 '18 at 02:30
  • Your code wasn't syntactically correct and I've corrected it - I also put it into an embed that run directly in the post. – dwjohnston Nov 26 '18 at 02:32
  • 1
    @dwjohnston, you should refrain from fixing code in questions, especially if the errors you fix are part of the problem. You basically provide the answer inside the question which doesn't help anyone. Most times it doesn't help OP and it certainly doesn't help future users with a similar problem. Providing the answer and explaining the principle is **a lot better** than modifying the question which will likely be reverted because you modified its meaning. – tao Nov 26 '18 at 02:36
  • How much space is there for the `ol`? With the second li moving 110 pixels away it's possible that it's out of view, maybe not visible at all depending on the context. – Quinn Mortimer Nov 26 '18 at 02:37
  • @AndreiGheorghiu if you're going to roll back to the incorrect HTML then atleast put it into the snippet. – dwjohnston Nov 26 '18 at 02:41
  • @dwjohnston, from my point of view, improving a question is optional, while reverting a detrimental edit is mandatory. – tao Nov 26 '18 at 02:47

1 Answers1

3

The problem you have is that ID selectors that start with a numeral aren't valid css selectors. I changed them to letters and it works. 

#a {
  text-decoration: underline;
  color: olivedrab;
}

#b {
  display: none;
  background-color: lightblue;
  width: 110px;
  height: 110px;
  overflow: auto;
}

#a:hover~#b {
  display:block;
}
<ol>
  <li>
    <a id="a">Text</a>
    <a id="b">Text</a>
  </li>
  <li>Text</li>
</ol>

Technically, the IDs are valid HTML IDs, but not valid CSS selectors.

See this answer for more details:

https://stackoverflow.com/a/31773673/1068446

Alternatively - you can escape the digits in your CSS: 

#\31 {
  text-decoration: underline;
  color: olivedrab;
}

#\32 {
  display: none;
  background-color: lightblue;
  width: 110px;
  height: 110px;
  overflow: auto;
}

#\31:hover~#\32 {
  display:block;
}
<ol>
  <li>
    <a id="1">Text</a>
    <a id="2">Text</a>
  </li>
  <li>Text</li>
</ol>

Explanation of the \3 It escapes the following string to the unicode value - in this case the digits start with 0030.

dwjohnston
  • 11,163
  • 32
  • 99
  • 194
  • Numbers can be used as ids, just like they can be used in classes. They just need proper escaping when referenced in CSS or JavaScript. I'll provide an example. – tao Nov 26 '18 at 02:43
  • I'm down-voting your answer as I consider it inaccurate. Ids starting with digits are perfectly valid. As long as the characters are escaped, the `id`s can be referenced in both CSS and JavaScript. Should you choose to fix it, please let me know so I can revert my vote. – tao Nov 26 '18 at 03:54