-1

I have a container which has one column and many rows and say row1 has button1.

There is another container just below with same structure as mentioned above and say row1 has button2

How can I change the button2 hover color when I hover on button1?

html snippet

<div class="container-fluid">
    <div class="divTableRow">
      <div class="col-2" style="border-right: 2px solid black">
        <div class=row1><i class="fas fa-desktop fa-3x"></i><span class="ft"><h5>Heading1</h5></div></span>
          <div class="butts">
<button id="test1" type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModal1">test1</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModal2">test2</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModal3">test3</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModal4">test4</button>
         </div>
      </div>
   </div>
</div>

<div class="container-fluid">
  <div class="divTableRow">
    <div class="col-1">
    <i class="fas fa-tools fa-3x"></i><h5>Heading2</h5>
    </div>
    <div class="col-11">
    <button id="test2" class="w3-button w3-white w3-border w3-border-black w3-round-large">check1</button>
    <button class="w3-button w3-white w3-border w3-border-black w3-round-large">check2</button>
    <button class="w3-button w3-white w3-border w3-border-black w3-round-large">check3</button>
    <button class="w3-button w3-white w3-border w3-border-black w3-round-large">check4</button>
   </div>
 </div>
</div>
</div>

What i was looking for is as i want to create a relation so, if i hover on say test1 then check1, check3 gets hover effect.

Please help

Eprint Basket
  • 11
  • 1

1 Answers1

0

If the other container is after the first one, you can use the + adjacent selector

container1:hover + container2 row1 button2 {
  /* your styles here */
}
Promise Tochi
  • 61
  • 7
  • Thanks for your reply, will try the same. I have googled and tried via css, js but nothing worked till now. and as i am new so may be its simple but i am not getting it. i will also copy paste code and more details if ahove doesnt work. thanks again – Eprint Basket Mar 24 '19 at 00:17
  • tried but not working, i have updated my post added code snippet – Eprint Basket Mar 24 '19 at 02:29
  • Fund the problem w3 button was causing issues, when changed to bootstrap buttons the javascript is working fine. – Eprint Basket Mar 25 '19 at 06:59