Отображение скрытых элементов при наведении курсора

Question

Отображение скрытых элементов при наведении курсора

0

У меня есть jsfiddle с некоторым кодом. Очень просто, когда я перемещаю мышь над одним div (triggerShowHidePanel), отображается другой скрытый div ниже (categoryContainer1). Выдвиньте мышь, а categoryContainer1 исчезнет.

Чтобы сделать код более полезным, я намереваюсь добавить более одного набора из них, который я создал на jsfiddle. Проблема в том, что он всегда показывает/скрывает категориюContainer1, а не categoryContainer2/3/4 и т.д. Я пропустил что-то очевидное?

http://jsfiddle.net/gUap5/24/

заранее спасибо

HTML

<div class="container">

  <div style='float:left; width:50px;' class='triggerShowHidePanel' panelID='1'>first</div>
  <div style='float:left; width:50px;' class='triggerShowHidePanel' panelID='2'>second </div>
  <div style='float:left; width:50px;' class='triggerShowHidePanel' panelID='3'>third </div>
  <div style='float:left; width:50px;' class='triggerShowHidePanel' panelID='4'>forth </div>

  <div class='categoryContainer1' style='float:left; display:none; width:100px;'>
    1st
  </div>    
  <div class='categoryContainer2' style='float:left; display:none; width:100px;'>
    2nd
  </div>
  <div class='categoryContainer3' style='float:left; display:none; width:100px;'>
    3rd
  </div>
  <div class='categoryContainer4' style='float:left; display:none; width:100px;'>
    4th 
  </div>

</div>

скрипт

$('.container').bind('mouseover', function() {
    var ele = $(this).find(".triggerShowHidePanel");
    var positionX = ele.position().top + 30;
    var positionY = ele.position().left;
    $('.categoryContainer' + ele.attr('panelID')).show();
    $('.categoryContainer' + ele.attr('panelID')).offset({ 
        top: Math.round(positionX), 
        left: Math.round(positionY)
    });     
}).bind('mouseout', function() {
    var ele = $(this).find(".triggerShowHidePanel");
    $('.categoryContainer' + ele.attr('panelID')).hide();
    $('.categoryContainer' + ele.attr('panelID')).offset({ top: 0, left: 0 });
});

user3061366 03 дек. 2013, в 13:56

Источник

Теги:

html

hidden

jsfiddle

1 ответ

Ещё вопросы

nx24a · Answer 1 · 2013-12-03T10-20-00.000Z

общая проблема заключается в том, что вы привязываете событие mouseover к элементу. В этом случае каждый раз, когда вы перемещаете мышь над контейнером, вы всегда получаете идентификатор панели первого элемента, который использует класс ".triggerShowHidePanel". Вы можете привязать курсор мыши к классу ".triggerShowHidePanel", это может решить проблему, с которой вы столкнулись

$('.triggerShowHidePanel').bind('mouseover', function() {
var ele = $(this);
var positionX = ele.position().top + 30;
var positionY = ele.position().left;
$('.categoryContainer' + ele.attr('panelID')).show();
$('.categoryContainer' + ele.attr('panelID')).offset({ 
    top: Math.round(positionX), 
    left: Math.round(positionY)
});     
}).bind('.triggerShowHidePanel', function() {
    var ele = $(this);
    $('.categoryContainer' + ele.attr('panelID')).hide();
    $('.categoryContainer' + ele.attr('panelID')).offset({ top: 0, left: 0 });
});