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.

Answer 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>

css on hover change div

Question

1 answers

solution1
1 2018-06-26 22:18:12

css on hover change div

Question

1 answers

solution1 1 2018-06-26 22:18:12

solution1
1 2018-06-26 22:18:12