0

I have this code:

        body  {
            background-color: darkgray;
            font-size: 2em;
         }

        div  {
            margin: 2em;
        }

        #outer  {
            background-color: purple;
            border: 2px solid transparent;
        }

        #outer:hover  {
            cursor: pointer;
            opacity: 40%;
            border: 2px solid yellow;
        }

        #first:hover  {
            color: red;
            font-weight: bold;
            cursor: pointer;
        }

        #first:hover #outer  {
            background-color: green;
            opacity: 100%;
        }
    <div id="outer">
        Outer

        <div id="first">
            First
        </div>
    </div>

It shows this:

enter image description here

When I hover over #outer it shows this:

enter image description here

When I hover over #first it shows this:

enter image description here

I'd like it to make the #outer background green and its opacity 100%, when the #first is hovered over.

However, it doesn't happen - when #first is hovered, the #outer background stays purple and its opacity stays 40%. How do I fix it?

EDIT:

I'm OK with updating all elements (for instance if there are more outer elements than one). And I don't want to use Javascript!

parsecer
  • 4,758
  • 13
  • 71
  • 140
  • I updated the tags to add javascript as the solution for this will be javascript as you need to select the parent of the hovered element. – imvain2 Jan 04 '23 at 22:48
  • @imvain2 I don't care about the parent element. I'm OK with updating a style of all `#outer` elements. I don't want to use JS – parsecer Jan 04 '23 at 23:20
  • 1
    the problem is you don't care about the parent element, but outer is the parent element. And CSS works in one direction and that is down, not up. So it goes down through the children, not reversing back up the DOM. You can try the :has in this answer but I don't think it will work for your use case: https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector – imvain2 Jan 05 '23 at 17:15

0 Answers0