jQuery Show div on hover no working

У меня есть группа div внутри структуры вкладки, которая имеет 3 отдельных класса. «office», «office + #» и в зависимости от того, что выбрано в фоновом режиме («доступно», «доступно», «занято». Мне нужно, чтобы эти divs отображались при наведении курсора. На данный момент все, что я пытаюсь do - заставить div фактически отображаться при наведении, но ничто, кажется, не работает, что я пытался. На данный момент у меня есть это, но я попробовал несколько разных вещей. Я все еще изучаю jQuery, поэтому любая помощь будет оценена.jQuery Show div on hover no working

Вот 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; 
}

источник

2013-02-22 dennisterrey

ссылка http://jsbin.com/oqutor/1/edit –

Посмотрите на свой селектор JQuery a.office, вы, вероятно, хотите использовать div.office, так как вы хотите дивы, чтобы показать себя на парении.

источник

2013-02-22 10:37:24

Это почти правильно. Я предполагаю, что вы хотите, чтобы divs отображались, когда вы наводили курсор на ссылки вверху. Ваш селектор ищет тег 'a' с классом' office', который не существует. Вероятно, вы должны использовать селектор '$ ('a.ui-tabs-anchor')' Это, вероятно, не конец истории. Возможно, вы захотите использовать задачи jQuery '.show()' и '.hide()' – Marryat

Спасибо, извините, мне следовало бы объяснить это немного лучше. Выбор a.office был раньше, когда я изменил офисный div на ссылку, но затем изменил его, забыл изменить его обратно в jQuery. То, что я пытаюсь сделать, - это когда вы навеки над офисным div, я хочу, чтобы этот офисный div показывал. В основном у меня есть карта офисов, когда вы наводите курсор на офис, я хочу, чтобы он показывал, доступен ли он, доступен или занят. – dennisterrey

jQuery Show div on hover no working

ответ

Смежные вопросы