0

I'm currently trying to make a circle with sections in which if you hover over a section a specific text is shown. The problem with my code is that for me to be able to tell if the section is hovered I have to use

.lis:nth-child(10):hover .section { opacity: 1;}

I searched on internet and I found the selector ~ but for me to be able to use it I would need to do something like 

.lis:nth-child(10):hover .section ~~~ .text0 { opacity: 1;}

But this does not work, here is a link to the codepen I am currently working on.

esteban
  • 13
  • 2
  • 1
    i dont think ~~~ works, what are you trying to do by using ~~~? – Chris Li Sep 13 '18 at 16:22
  • access the text outside of the div outside of the li outside of the ul – esteban Sep 13 '18 at 16:33
  • i think you might misunderstood ~, ~ is general sibling selector it only selects siblings that follows an element. unfortunately theres no way of going "up" in css – Chris Li Sep 13 '18 at 16:35
  • Unfortunately this is not possible with CSS alone as the CSS rendering model is top down (i.e. you cannot bubble back up the DOM, rather only get more specific going deeper). You can accomplish this with JavaScript however. – War10ck Sep 13 '18 at 16:42
  • for future reference to any other users, there is a work around if you use the jquery which would be: https://codepen.io/sopranopillow/pen/EeReKx – esteban Sep 13 '18 at 22:37

1 Answers1

-2

There is no way to target your external div elements with CSS because they do not even part of your <ul>. You could technically do this if your text was inside of each <li> with some absolute positioning to get them all where you want. Then your transforms could be done on the div inside for the slices.

This would allow you to do your hover styles on the <li>.

You cannot stack ~ selector to travel up the DOM. The only way to do what you want with the current markup would be with Javascript.

brianespinosa
  • 2,408
  • 12
  • 22