2013-02-22 126 views
0

我有一個標籤結構內有3個獨立的類的divs組。 「辦公室」,「辦公室+#」和後端選擇什麼(「可用」,「availableFrom」,「佔用」),我需要這些div來顯示當徘徊時。做得到的div實際上顯示懸停,但似乎沒有工作,我已經嘗試。現在我有這個,但已嘗試多種不同的東西。我仍然在學習jQuery,所以任何幫助,將不勝感激jQuery顯示div懸停沒有工作

下面是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; 
} 
+0

鏈接http://jsbin.com/oqutor/1/edit – 2013-02-22 10:35:15

回答

0

看看你的jQuery選擇a.office,你可能想使用div.office既然你想的div來顯示自己對懸停。

+0

這幾乎是正確的。我假設你想讓div在鼠標懸停在頂部的鏈接上時出現。 你的選擇器正在尋找一個'a'標籤,其中''office'類不存在。你應該使用選擇器'$('a.ui-tabs-anchor')' 這可能不是故事的結尾。您可能想使用jQuery任務'.show()'和'.hide()' – Marryat 2013-02-22 10:44:51

+0

謝謝,對不起,我應該可能更好地解釋了這一點。 a.office選擇來自我之前將Office div更改爲鏈接但之後將其改回,忘記將其更改回我的jQuery。 我想要做的是當你將鼠標懸停在辦公室div上時,我想要顯示辦公室div。基本上我有一張辦公室地圖,當你將鼠標懸停在辦公室上時,我想讓它顯示它是否可用,可用或被佔用。 – dennisterrey 2013-02-22 10:52:16