css on hover change div

Question

I have the following code and basically I am trying to change css of a div that is within another div and can not get it to respond when the div that needs to be changed is within another div outside the context of the hover item.

<style>
    p.hometown:hover > #test  { 
        background: yellow;
    }

#test {   background: blue;}

</style>
</head>
<body>

<p>My name is Donald.</p>
<p class="hometown">I live in Ducksburg.</p>

<p>My name is Dolly.</p>
<p class="hometown">I also live in Ducksburg.</p>
<div id="tt">
<div id="test">dfgfdg</div></div>

I have tried multiple methods such as:

p.hometown:hover #tt+#test  { 
    background: yellow;
}

also

p.hometown:hover > #test  { 
    background: yellow;
}

None of these attempts are working. If I remove div tt then it will work just fine. Problem is I am trying to use this method on squarespace to fix the limitations there. NO JAVASCRIPT AND CAN NOT ALERT HTML css alteration only.

You can do this by JavaScript – Asif Sharif Shahid Jun 26 '18 at 22:18 — Asif Sharif Shahid, Jun 26 '18 at 22:18

Temani Afif · Answer 1 · 2018-06-26T22:20:19.040

1

You are almost good BUT you need to first target the parent div. You can also use ~ instead of + to make this working for all the p with class .hometown:

p.hometown:hover ~ #tt > #test {
  background: yellow;
}

#test {
  background: blue;
}

<p>My name is Donald.</p>
<p class="hometown">I live in Ducksburg.</p>

<p>My name is Dolly.</p>
<p class="hometown">I also live in Ducksburg.</p>
<div id="tt">
  <div id="test">dfgfdg</div>
</div>

edited Jun 26 '18 at 22:20

answered Jun 26 '18 at 22:18

Temani Afif

245,468
26
309
415

is there a way to make that change persistent after it is triggered? – James Shelton Jun 26 '18 at 22:20
@JamesShelton unfortunately no, CSS doesn't save states. – Temani Afif Jun 26 '18 at 22:21
so there is no way to even switch the css it pays attention to? – James Shelton Jun 26 '18 at 22:23
also what if the divs dont have ids they are just classes – James Shelton Jun 26 '18 at 22:25
@JamesShelton simple replace ID by classes – Temani Afif Jun 26 '18 at 22:26
when I hit copy selector it shows #root > div > div > div > div > div > div.PanelController-content-2ufb4 > div > div does that mean I need to use that to access and change the css for that class? – James Shelton Jun 26 '18 at 22:30
I did this #root > div > div > div > div > div > div.PanelController-content-2ufb4 > div > div{opacity: 0.0;} and it did not have any effect – James Shelton Jun 26 '18 at 22:31
@JamesShelton I cannot tell you if I am not able to see the HTML code, do you have a link ? – Temani Afif Jun 26 '18 at 22:55
goldietees.com trying to make the class .intrinsic appear when my account nav tab is visible (top right button triggers that) – James Shelton Jun 26 '18 at 22:57

css on hover change div

1 Answers1