悬停一个div并在表的同一行中使用JS修改另一个div的CSS，该表中的3行使用相同的类

Question

I have a HTML table that includes 3 rows. Each row has a column circle and a column panel (sometimes the panel column is before the circle, sometimes after).

    <table>
      <tr>
        <td>
          <div class="circle"></div>
        </td>
        <td>
          <div class="panel-right></div>
        </td>
      </tr>

      <tr>
        <td>
          <div class="panel-left></div>
        </td>
        <td>
          <div class="circle"></div>
        </td>
      </tr>

      <tr>
        <td>
          <div class="circle"></div>
        </td>
        <td>
          <div class="panel-right></div>
        </td>
      </tr>
    </table>

When hover panel, panel goes left or right from 10px.

    table .panel-left:hover,
    table .panel-left:focus {
      margin-right: -10px;
      margin-left: 10px;
    }

    table .panel-right:hover,
    table .panel-right:focus {
      margin-left: -10px;
      margin-right: 10px;
    }

With javascript, i want to modify the css of circle when hover the panel-left or panel right

    $(document).ready(function() {

      $(".panel-left").mouseover(function(){
        $(".circle").css("border", "5px solid #16a085");
      });

      $(".panel-left").mouseout(function(){
        $(".circle").css("border", "3px solid #cccccc");
      });

      $(".panel-right").mouseover(function(){
        $(".circle").css("border", "5px solid #16a085");
      });

      $(".panel-right").mouseout(function(){
        $(".circle").css("border", "3px solid #cccccc");
      });

    });

This is working well, except than all the circle are modified, when it should be only the circle inside of the row that contains the panel hovered.

What should be the javascript?

Answer 1

Is this what you want?:

<table>
  <tr>
    <td class="circle-td">
      <div class="circle"></div>
    </td>
    <td>
      <div class="panel-right"></div>
    </td>
  </tr>

  <tr>
    <td>
      <div class="panel-left"></div>
    </td>
    <td class="circle-td">
      <div class="circle"></div>
    </td>
  </tr>

  <tr>
    <td class="circle-td">
      <div class="circle"></div>
    </td>
    <td>
      <div class="panel-right"></div>
    </td>
  </tr>
</table>

.circle, .panel-right, .panel-left {
   background-color:red;
   width:200px;
   height:200px;
   border-radius:100%;
   border:3px solid #cccccc;
}

.panel-right, .panel-left {
    width:200px;
    height:200px;
    background-color:green;
}

.panel-left:hover,
.panel-left:focus {
  margin-right: -10px;
  margin-left: 10px;
}

.panel-right:hover,
.panel-right:focus {
  margin-left: -10px;
  margin-right: 10px;
}

$(document).ready(function() {
    $('.panel-left, .panel-right').mouseover(function() {
        $(this).closest('td')
               .siblings('.circle-td')
               .find('.circle')
               .css('border', '5px solid #16a085');
    }).mouseout(function() {
        $(this).closest('td')
               .siblings('.circle-td')
               .find('.circle')
               .css('border', '5px solid #cccccc')
    });   
});

And here is the