我想展示一个类.div-TQA-SF006-U-static和隐藏.div-TQA-SF006-U-160jQuery和CSS - 悬停和.mouseleave
当鼠标移到.TQA-SF006-U-160mm-parent，显示类.div-TQA-SF006-U-160和隐藏.div-TQA-SF006-U-static
努力实现这个使用JQuery和CSS，但现在面临困难 - 如果我错过了其他重要信息，请让我知道。 任何帮助将不胜感激。
只是单挑，你链接的小提琴不包括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>
<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>我改变了我的jquery功能，让它变得完美，谢谢。 我现在想要在鼠标离开div类后始终显示备件信息（.div-TQA-SF006-U-160） - 您是否可以通过任何机会帮助解决这个问题？ [已更新你的JSFiddle]（https://jsfiddle.net/xpk82w65/1/） – terryeah
好的 - 只需从我的示例中删除第二个函数即'mouseout'。 – jack
我的意思是因为我在这段代码之后还有其他div，我想保留mouseover和mouseout函数，并且有一个额外的功能，单击时可以显示备件信息'.div-TQA-SF006-U-160'。 – terryeah
添加以下代码，以使备件信息消失鼠标离开的时候。
$(".TQA-SF006-U-160mm-parent").mouseleave(function(){
$(".div-TQA-SF006-U-static").show();
$(".div-TQA-SF006-U-160").hide();
});
究竟什么困难......？ –