我在一个标签结构中有一组 div，它们有 3 个单独的类。“office”、“office+#”以及后端选择的内容（“available”、“availableFrom”、“occupied”。我需要在悬停时显示这些 div。目前，我正在尝试要做的是让 div 在悬停时实际显示，但我尝试过似乎没有任何工作。目前我有这个，但尝试了多种不同的东西。我仍在学习 jQuery，所以任何帮助将不胜感激。
这是HTML代码：
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-1" aria-labelledby="ui-id-1" aria-selected="false"><a href="#tabs-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Ground Floor /</a></li>
<li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tabs-2" aria-labelledby="ui-id-2" aria-selected="true"><a href="#tabs-2" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">First Floor /</a></li>
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-3" aria-labelledby="ui-id-3" aria-selected="false"><a href="#tabs-3" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3">Second Floor</a></li>
</ul>
<div id="tabs-1" class="groundFloor tab ui-tabs-panel ui-widget-content ui-corner-bottom" aria-labelledby="ui-id-1" role="tabpanel" style="display: none;" aria-expanded="false" aria-hidden="true">
<img src="http://concepts/10highstreet/wp-content/themes/10highstreet/img/groundFloor.jpg">
<div class="office office1 availableFrom">
<div class="date">14 March 2013</div>
</div>
<div class="office office2 availableFrom">
<div class="date">19 April 2013</div>
</div>
</div>
<div id="tabs-2" class="firstFloor tab ui-tabs-panel ui-widget-content ui-corner-bottom" aria-labelledby="ui-id-2" role="tabpanel" style="" aria-expanded="true" aria-hidden="false">
<img src="http://concepts/10highstreet/wp-content/themes/10highstreet/img/firstFloor.jpg">
<div class="office office3 availableFrom">
<div class="date">10 May 2013</div>
</div>
<div class="office office3-1 availableFrom">
<div class="date">10 May 2013</div>
</div>
<div class="office office4 available">
<div class="date"></div>
</div>
<div class="office office5 available">
<div class="date"></div>
</div>
<div class="office office6 available">
<div class="date"></div>
</div>
<div class="office office7 available">
<div class="date"></div>
</div>
<div class="office office8 available">
<div class="date"></div>
</div>
<div class="office office9 availableFrom">
<div class="date">06 June 2013</div>
</div>
<div class="office office10 availableFrom">
<div class="date">28 February 2013</div>
</div>
<div class="office office10-1 availableFrom">
<div class="date">28 February 2013</div>
</div>
<a class="office office11 occupied">
<div class="date"></div>
</a>
</div>
<div id="tabs-3" class="secondFloor tab ui-tabs-panel ui-widget-content ui-corner-bottom" aria-labelledby="ui-id-3" role="tabpanel" style="display: none;" aria-expanded="false" aria-hidden="true">
<img src="http://concepts/10highstreet/wp-content/themes/10highstreet/img/secondFloor.jpg">
<div class="office office12 occupied">
<div class="date"></div>
</div>
<div class="office office13 occupied">
<div class="date"></div>
</div>
<div class="office office14 occupied">
</div>
<div class="office office15 occupied">
</div>
</div>
</div>
这是 jQuery
$('a.office').mouseover(function(){
div = $('div.office');
div.stop().animate({visibility: visible}, 150);
}).mouseout(function(){
div.stop().animate({visibility: hidden}, 150);
});
和 CSS
.ui-tabs ul {
display:block;
clear:both;
height:40px;
list-style-type:none;
margin:0;
padding:0;
}
.ui-tabs ul li {
display:block;
float:left;
list-style-type:none;
padding-right:5px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:1.4em;
font-weight:100;
}
.ui-tabs ul li a:link, .ui-tabs ul li a:visited {
color:#7a7989;
}
.ui-tabs ul li.ui-state-active a:link, .ui-tabs ul li.ui-state-active a:visited {
color:#03c2f9;
}
.ui-tabs .tab {
clear:both;
height:700px;
width:998px;
margin:0 auto;
}
.office {
visibility:hidden;
}
.office .date {
display:none;
}
.office1 {
position: relative;
top: -256px;
left: 282px;
opacity: 0.6;
height: 185px;
width: 192px;
}
.office2 {
position: relative;
top: -435px;
left: 529px;
opacity: 0.6;
height: 178px;
width: 184px;
}
.office3 {
position: relative;
top: -244px;
left: 177px;
opacity: 0.6;
height: 193px;
width: 89px;
}
.office3-1 {
position: relative;
top: -553px;
left: 282px;
opacity: 0.6;
height: 95px;
width: 130px;
}
.office4 {
position: relative;
top: -498px;
left: 301px;
opacity: 0.6;
height: 139px;
width: 142px;
}
.ui-tabs .tab .office5 {
position: relative;
top: -617px;
left: 450px;
opacity: 0.6;
height: 120px;
width: 79px;
}
.office6 {
position: relative;
top: -754px;
left: 533px;
opacity: 0.6;
height: 137px;
width: 89px;
}
.office7 {
position: relative;
top: -890px;
left: 627px;
opacity: 0.6;
height: 137px;
width: 89px;
}
.office8 {
position: relative;
top: -1360px;
left: 365px;
opacity: 0.6;
height: 127px;
width: 139px;
}
.office9 {
position: relative;
top: -1487px;
left: 282px;
opacity: 0.6;
height: 169px;
width: 76px;
}
.office10 {
position: relative;
top: -1657px;
left: 550px;
opacity: 0.6;
height: 78px;
width: 133px;
}
.office10-1 {
position: relative;
top: -1870px;
left: 695px;
opacity: 0.6;
height: 208px;
width: 162px;
}
.office11 {
position: relative;
top: -1861px;
left: 549px;
opacity: 0.6;
height: 89px;
width: 138px;
}
.office12 {
position: relative;
top: -266px;
left: 576px;
opacity: 0.6;
height: 166px;
width: 131px;
}
.office13 {
position: relative;
top: -386px;
left: 376px;
opacity: 0.6;
height: 136px;
width: 89px;
}
.office14 {
position: relative;
top: -522px;
left: 273px;
opacity: 0.6;
height: 136px;
width: 100px;
}
.office15 {
position: relative;
top: -643px;
left: 176px;
opacity: 0.6;
height: 106px;
width: 92px;
}
.available {
background: #0C9;
}
.occupied {
background: #ea6969;
}
.availableFrom {
background: #c8c8c8;
}