Question

我试图显示课程.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

Answer 1

只是单挑，你联系的小提琴并不包括JQuery，所以它根本无法运行。您可以使用Javascript编辑器框中的齿轮图标修复此问题 - here's a fork并修复此问题，以及我在下面提出的解决方案。

无论如何，这是实现你所追求的目标的一种方式，尽管可能有更高效的方法;我认为切换css类通常比.show（）和.hide（）更受欢迎，但是使用适合你的方法。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我添加了以下代码，以便在鼠标离开时消耗备件信息。

$(".TQA-SF006-U-160mm-parent").mouseleave(function(){
    $(".div-TQA-SF006-U-static").show();
    $(".div-TQA-SF006-U-160").hide();
});

JQuery＆amp; CSS - 悬停和.mouseleave

2 个答案: