Hover ДИВ JQuery

Вот мой сценарий:Hover ДИВ JQuery

<body> 
    <div id ="mainCategory" class='fade'> 
     Category</div> 
    <div id="divSubCategory"> 
     Category1 
     <br /> 
     Category2 
    </div> 
    <script type="text/javascript"> 
     $("div").hover(
      function() { 
       $(this).append($("#divSubCategory").html()); 
      }, 
      function() { 
       $("#divSubCategory").remove(); 
      } 
     ); 
     $("#divSubCategory.fade").hover(function() { $(this).fadeOut(100); $(this).fadeIn(500); }); 

    </script> 
</body>

Я хочу, чтобы показать и скрыть divSubCategory на mainCategory парении. Но это не сработает. Что я должен добавить?

источник

2012-06-29 cagin

$(document).ready(function(){ 
    $('#mainCategory').bind('mouseenter', function() { 
     $('#divSubCategory').fadeIn(); 
    }); 
    $('#mainCategory').bind('mouseleave', function() { 
     $('#divSubCategory').fadeOut(); 
    }); 
});

источник

2012-06-29 08:02:59

Работает, но я хочу скрыть подкатегорию, когда мышь уходит из основной категории. Это скрывает подкатегорию, а мышь - в основной категории. – cagin

Проблема заключается в том, что 'div # divSubCategory' не заключен в' div # mainCategory', поэтому, когда вы пытаетесь навести указатель мыши на 'div # divSubCategory', div будет скрываться. Если это для системы меню (например), то это не будет работать для вас, потому что вам нужно «div # divSubCategory» отображать, пока вы наводите на нее курсор. –

Тот же результат Ник. – cagin

-3

Wrap код внутри функции document.ready()

$(document).ready(function(){ 
    // Your code here 
});

источник

2012-06-29 07:59:17 Chris

Это не должно быть проблемой, как код написан после HTML. –

@ Крис это не работает. – cagin

@ThomasClayson, у меня есть html-теги, которые просто не купились здесь. – cagin

Ok чувак проблема в том, что вы используете .html(). Это копирует внутренний HTML (не внешний <div id="divSubCategory"></div> немного слишком ... просто немного в середине.

Из-за этого, когда вы делаете $('#divSubCategory').remove() его удаление фактического DIV в HTML, а не HTML вы переместили в DIV выше.

если у вас есть display: none на #divSubCategory вы увидите текст от Div получить прилагается к первому DIV, а затем, когда вы мыши вне его не уходить (хотя второй (скрытый) DIV будет удаляться).

В любом случае, чтобы использовать clone(). Я сделаю для вас скрипку:

http://jsfiddle.net/fZZu5/1/

Я также исправил ваши замирания.

EDIT: Это перемещает div#divSubCategory в div#mainCategory перед его отображением, а затем удаляет его полностью оттуда при выводе мыши - это то, что я предполагал, что вы хотели сделать из своего кода. Ники просто показывают и скрывают его там, где он есть. В зависимости от того, что вы хотите, оба этих ответа верны. :)

источник

2012-06-29 08:08:10

Это 100% работает с вашим требованием:

Проверьте это: http://jsfiddle.net/ZWqnk/8/

источник

2012-06-29 08:19:43

Hover ДИВ JQuery

ответ

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