jQuery悬停时显示div不工作

Question

我在一个tab结构中有一组div，它们有3个独立的类。"office+#“，"availableFrom"，这取决于在后端选择的是什么("available"，"office"，"occupied”。我需要这些div在悬停时显示。目前，我所要做的就是让div真正显示在hover上，但我尝试过的结果似乎都不起作用。目前我有这个，但已经尝试了多个不同的东西。我还在学习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;
}

Answer 1

看看您的div选择器a.office，您可能想要使用div.office，因为您希望div在悬停时显示它们自己。