javascript - jQuery和CSS-悬停和.mouseleave

我正在尝试显示一个类.div-TQA-SF006-U-static并隐藏.div-TQA-SF006-U-160

然后将鼠标悬停在.TQA-SF006-U-160mm-parent上，显示一个类.div-TQA-SF006-U-160并隐藏.div-TQA-SF006-U-static

尝试使用JQuery和CSS来实现这一目标，但现在面临困难-如果我错过了任何其他重要信息，请告诉我。
任何帮助将非常感激。

JSFiddle example

最佳答案

单挑，您链接的小提琴不包含JQuery，因此它根本无法运行。您可以使用Javascript编辑器框中的齿轮图标来解决此问题-修复该问题的here's a fork以及我在下面提出的解决方案。

无论如何，这是实现您所追求的目标的一种方法，尽管可能更有效。我认为切换CSS类通常比.show（）和.hide（）更可取，但是请使用适合您的方法。

$(document).ready(function() {
  $(".TQA-SF006-U-160mm-parent").on('mouseover', function() {
    $(".div-TQA-SF006-U-static").hide();
    $(".div-TQA-SF006-U-160").show();
  });
  $(".TQA-SF006-U-160mm-parent").on('mouseout', function() {
    $(".div-TQA-SF006-U-static").show();
    $(".div-TQA-SF006-U-160").hide();
  });
});

.div-TQA-SF006 .td-suspension-child-row2:hover {
  text-decoration: underline;
}

.table-suspension-list {
  border: 0;
}

.table-suspension-list .partNumber {
  border: 1px solid #1F497D;
  border-bottom: 1px solid white;
  background-color: #1F497D;
  color: white;
  font-family: erasFamily;
  font-size: 16px;
  font-weight: bold;
  line-height: 5px;
  padding: 0;
  vertical-align: middle;
}

.table-suspension-list .partNumber-bottom {
  border: 1px solid #1F497D;
  background-color: #1F497D;
  color: white;
  font-family: erasFamily;
  font-size: 16px;
  font-weight: bold;
  padding: 0;
  vertical-align: middle;
}

.table-suspension-list .partNumber div {
  color: white;
}

.table-suspension-list .partNumber-bottom div {
  color: white;
}

.table-suspension-list .partDescription {
  border: 1px solid #1F497D;
  color: #1F497D;
  font-family: erasFamily;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  line-height: 5px;
  padding: 0;
  text-transform: uppercase;
  vertical-align: middle;
}

.table-suspension-list .partDescription div {
  color: #1F497D;
}

.table-suspension tbody {
  text-align: center;
  vertical-align: middle;
  color: #002060;
}

.table-suspension th {
  background-color: white;
  border: 0;
  border-top: 2px solid #002060;
  padding: 10px 0 10px 0;
  vertical-align: middle;
  font-family: erasFamily;
  font-size: 26px;
  color: #002060;
  text-transform: uppercase;
}

.td-suspension-parent {
  background-color: #deeaf6;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
}

.td-suspension-child {
  background-color: white;
  text-align: center;
  vertical-align: middle;
}

.td-suspension-child-row2 {
  background-color: white;
  text-align: center;
  vertical-align: middle;
}

.td-suspension-child div {
  font-size: 30px;
  font-weight: bold;
  padding: 5px;
}

.td-suspension-child-row2 div {
  font-size: 30px;
  font-weight: bold;
  padding: 5px;
}

.div-TQA-SF006-U-160 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div-TQA-SF006">
  <table class="table-suspension">
    <tbody>
      <th colspan="6">
        SPECIFICATIONS
      </th>
      <tr>
        <td class="td-suspension-parent" colspan="3" style="width: 50%">Part Number</td>
        <td class="td-suspension-parent" colspan="3" style="width: 50%">Description</td>
      </tr>
      <tr>
        <td class="td-suspension-child" colspan="3">TQA-SF006</td>
        <td class="td-suspension-child" colspan="3">Underslung Air Suspension for 10 Ton Axle</td>
      </tr>
      <tr>
        <td class="td-suspension-parent" colspan="6">Available Ride Height</td>
      </tr>
      <tr>
        <td class="td-suspension-child-row2" style="width:20%">
          <div class="TQA-SF006-U-160mm-parent">160mm</div>
        </td>
        <td class="td-suspension-child-row2" style="width:20%">
          <div class="TQA-SF006-U-200mm-parent">200mm</div>
        </td>
        <td class="td-suspension-child-row2" style="width:20%">
          <div class="TQA-SF006-U-250mm-parent">250mm</div>
        </td>
        <td class="td-suspension-child-row2" style="width:20%">
          <div class="TQA-SF006-U-275mm-parent">275mm</div>
        </td>
        <td class="td-suspension-child-row2" style="width:20%">
          <div class="TQA-SF006-U-300mm-parent">300mm</div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

&nbsp;

<div class="div-TQA-SF006-U-static">
  <table class="table-suspension">
    <tbody>
      <th>
        Spare Parts
      </th>
      <tr>
        <td class="td-suspension-parent">Hover mouse over desired Ride Height for pop-up information</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="div-TQA-SF006-U-160">
  <table class="table-suspension">
    <tbody>
      <th colspan="6">
        SPARE PARTS
      </th>
      <tr>
        <td class="td-suspension-parent">TQA-SPA07</td>
        <td class="td-suspension-parent">TQA-PB006</td>
        <td class="td-suspension-parent">TQA-AB08</td>
        <td class="td-suspension-parent">TQA-SA08</td>
        <td class="td-suspension-parent">TQA-UB001</td>
        <td class="td-suspension-parent">TQA-SPA20</td>
      </tr>
      <tr>
        <td class="td-suspension-chlid">Parabolic Spring Straight Type</td>
        <td class="td-suspension-chlid">Pivot Bolt Kit</td>
        <td class="td-suspension-chlid">Air Spring</td>
        <td class="td-suspension-chlid">Shock Absorber</td>
        <td class="td-suspension-chlid">U-Bot Kit</td>
        <td class="td-suspension-chlid">Spring Bush</td>
      </tr>
    </tbody>
  </table>
</div>

关于javascript - jQuery和CSS-悬停和.mouseleave，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44620675/