Question

我的悬停有问题，我有一个父div和一个子div。问题是如果我悬停父div，然后链接“删除”出现在子div中，但是当我将鼠标指向链接“删除”时它会闪烁。也许是因为鼠标悬停和鼠标移动仍然有效，即使我在儿童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

如果您使用的是JQuery，请不要使用内联javascript！将您的脚本添加到单独的<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

我想知道你是否有闪烁问题，因为一旦你将鼠标悬停在孩子身上，父div高度会有所不同。我没有看到你的CSS，所以我无法确定。避免此问题的一种方法是更改其可见性。使用display:none将隐藏元素，使其不占用原始空间。使用visibility:hidden隐藏内容但保留对象的原始空间......我使用不引人注意的jQuery和确认对话框将一些示例代码汇总在一起。

备注的

要删除的行ID包含在父类的name属性中。
父div的类名称为deleteme，因为ID必须是唯一的。
如果删除链接占用的空间太大，您可以将子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 3

我会使用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 4

我想你想要这样的东西？我不确定你想说什么。

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

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

jquery悬停父div

4 个答案: