4
<div class="main">
 <div class="parent">
  <div class="content-1"> A </div>
 </div>
 <div class="content-2"> B </div>
</div>

On hover of content-1, I want to style content-2

kavandalal
  • 114
  • 6

1 Answers1

0

Well, I have found a solution for this, which I never used which is a ">" sign. I used Main for doing this, I used content-1 but it doesn't work for me, simce to me it act like then first-child and last-child or something like that. here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Stack13</title>

    <style>
        
        .main:hover > .content-2{
            background-color: red !important;
            color: blue !important;
        }


    </style>



</head>
<body>

<div class="main">
    <div class="parent">
        <div class="content-1"> A </div>
    </div>
    <div class="content-2"> B </div>
</div>


</body>
</html>


.main{
  border: 1px black solid;
}

.content-1{
  border: 1px blue solid;
}

.main:hover > .content-2{
    background-color: red !important;
    color: white !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Stack13</title>
</head>
<body>

<div class="main">
    <div class="parent">
        <div class="content-1"> A </div>
    </div>
    <div class="content-2"> B </div>    
</div>


</body>
</html>
AwatITWork
  • 556
  • 1
  • 5
  • 13
  • Make sure to explain that this will style .content-2 on hover of .main and all of its children rather than just .content-1 – Zach Jensz Mar 19 '22 at 11:31
  • Yes, but it is clear I think – AwatITWork Mar 19 '22 at 11:32
  • Also you can turn your code into a snippet with Ctrl+M or the snippet button in the editing toolbar so that people can run it with one click – Zach Jensz Mar 19 '22 at 11:32
  • Actually, I have targeted content-2, so only that will be affected. try it, I have edited the answer including Snippet. – AwatITWork Mar 19 '22 at 11:36
  • `On hover of content-1, I want to style content-2` Read it carefully :) – Zach Jensz Mar 19 '22 at 11:38
  • So, can you read my answer too carefully :), USED Main, I started with your answer but for me not working for Firefox and Chrome. so – AwatITWork Mar 19 '22 at 11:42
  • I'm not sure why my code isn't working for you. Please listen to the advice I am giving you, you have not answered the question accurately. – Zach Jensz Mar 19 '22 at 11:46
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/243089/discussion-between-awatitwork-and-zach-jensz). – AwatITWork Mar 19 '22 at 11:52