javascript - 悬停一个 div 并使用 JS 在具有 3 行的表中的同一行内使用相同的类修改另一个 div 的 CSS

Question

我有一个包含 3 行的 HTML 表格。 每行都有一个列圆圈和一个列面板(有时面板列在圆圈之前，有时在圆圈之后)。

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

悬停面板时，面板从 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;
    }

使用 javascript，我想在将鼠标悬停在面板左侧或面板右侧时修改圆圈的 css

    $(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");
      });

    });

这很好用，除了所有的圆都被修改，当它应该只有包含面板的行内的圆被悬停时。

javascript 应该是什么？

Answer 1

这是你想要的吗？

HTML:

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

CSS:

.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;
}

Javascript

$(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')
    });   
});

这是 fiddle