jquery hover родительский div

Question

У меня проблема с парением, у меня есть родительский div и дочерний div. Проблема в том, что если я наведу курсор на родительский элемент div, то в дочернем элементе div появится ссылка «удалить», но когда я указываю мышью на ссылку «удалить», она мигает. Может быть, потому что mouseover и mouseout все еще работают, даже когда я нахожусь на дочернем div.

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

 <div onmouseover="delete_comment_show('.$row_comments->id.')" onmouseout="delete_comment_hide('.$row_comments->id.')">
     <div><div>   'this is the child div which link "delete" will appear"
 </div>

Answer 1

не используйте встроенный JavaScript, если вы используете JQuery! Добавьте ваш скрипт в отдельный блок <script type="text/javascript>...</script>. Затем присвойте родительский div id или class, чтобы JQuery мог выбрать его, и функцию hover(), чтобы вызвать hide() и show():

<script type="text/javascript">
$(document).ready(function() {
    $('#myParent').hover(function() {
        $(this).children().show();
    },
    function() {
        $(this).children().hide();
    });
});
</script>

<div id="myParent">
    <div>delete</div>
</div>

Answer 2

Я бы сделал это, используя метод hover():

HTML

<div id="comment-1" class="comment">
   <p>some content</p>
   <div class="delete">[x] Delete</div>  
</div>
<div id="comment-2" class="comment">
   <p>some content</p>  
   <div class="delete">[x] Delete</div>  
</div>

JQuery

$(document).ready(function() {
   // hide the delete div(s)
   $('.delete').hide();
   // bind the click event of the delete div(s) to remove the parent 'comment' div
   $('.delete').bind('click', function() {
       $(this).parent('.comment').remove();
     }); 
   // bind the hover event, 
   // in callback calls show() on the child with class 'delete'
   // out callback calls hide() on the child with class ''delete'
   $('.comment').hover(function() {
       $(this).children('.delete').show();
     }, function() {
       $(this).children('.delete').hide();
     });
   });

Рабочий пример для JSBin

Answer 3

Интересно, возникла ли у вас проблема мерцания из-за разницы в родительской высоте div, когда вы наводите курсор на ребенка? Я не вижу ваш CSS, поэтому не могу сказать наверняка. Один из способов избежать этой проблемы - изменить ее видимость. Использование display:none скроет элемент, чтобы он не занимал его оригинальное пространство. Использование visibility:hidden скрывает содержимое, но оставляет оригинальное пространство объекта ... Я собрал пример кода, используя ненавязчивый jQuery и диалоговое окно подтверждения.

Примечания

• Идентификатор строки для удаления содержится в атрибуте name родительского класса.
• У родительского div есть имя класса deleteme, так как идентификаторы должны быть уникальными.
• Если ссылка Удалить занимает слишком много места, вы можете заменить дочерний элемент div на span, чтобы он оставался встроенным.

HTML

<div class="deleteme" name="cid001">
 Hover over me #1 (comment id=cid001)
 <div> [X] Delete?</div>
</div>

<div class="deleteme" name="cid002">
  Hover over me #2 (comment id=cid002)
 <div> [X] Delete?</div>
</div>

Сценарий

$(document).ready(function(){
 $('.deleteme').hover(function(){
  $(this).find('div').css('visibility','visible')
 },function(){
  $(this).find('div').css('visibility','hidden');
 });
 $('.deleteme div')
  .css('visibility','hidden')
  .click(function(){
  // Confirmation
  if (confirm("Are you sure?")){
   alert( "delete row with ID = " + $(this).parent().attr('name') ); // the name contains the comment ID to delete
  }
 })
})

Answer 4

Я думаю, ты хочешь что-то подобное? Я не уверен, что вы пытаетесь сказать.

jQuery("div#parent").bind("mouseover", function(){
  // Do mouse over code here
});

jQuery("div#parent").bind("mouseout", function(){
  // Do mouse out code here
});