悬停事件上的删除按钮

Delete button on hover event

本文关键字：删除 按钮 事件 悬停      更新时间：2023-10-02

我在使用hoverIntent时遇到了真正的问题。

http://jsfiddle.net/5fwqL/

我想要什么：

  1. 将鼠标悬停在文本上大约500毫秒时，我希望显示删除文本
  2. 如果我按下删除按钮，我希望删除文本
  3. 如果我在不按deletetext的情况下退出文本，我希望它隐藏（）

javascript

$(document).on({
mouseenter: function () {
    mouse_is_inside = true;
    $(this).next().slideDown();            
},
mouseleave: function () {
    mouse_is_inside = false;
    $(this).next().hide();   
}
}, '.title');
$('.deleteLink').on('click', function() {
   $(this).prev().remove();         
});

html

<div>
   <div class='title'>TitleText</div>
   <div class='delete'><a class='deleteLink' href="#">delete...</a></div>
</div>

**忘了提它必须在IE8中工作，所以我不得不使用旧风格！**

看看这把小提琴http://jsfiddle.net/joevallender/42Tw8/

您可以使用CSS来处理显示和隐藏删除链接。假设你像这个一样嵌套你的HTML

<div class='title'>
    TitleText 1
    <a class='delete' href="#">delete...</a>
</div>

然后你可以使用类似的CSS

.delete{
    color: red;
    display: none;
}
.title:hover .delete {
   display:block  
}

实际上，这是删除/编辑链接之类的常见模式。.title:hover.delete表示当父级.title悬停在其上时，.delete具有的CSS。在示例中，您也可以向父级添加任意类，如果希望保持相同的HTML排列，则可以使用该类。

然后使用下面的JS来处理点击

$(document).ready(function(){
    $('.delete').click(function(){
        $(this).parent().remove();
        return false;
    });
});

这有道理吗？它的排列与您的起点略有不同

编辑

对于我在评论中提到的淡入/淡出，你可以使用类似于的东西

.delete{
    color: red;
    opacity:0;
    transition:opacity 0.5s linear;
    -moz-transition: opacity 0.5s linear;
    -webkit-transition: opacity 0.5s linear;
}
.title:hover .delete {
   opacity: 1;
   transition:opacity 2s linear;
   -moz-transition: opacity 2s linear;
   -webkit-transition: opacity 2s linear;
}​

EDIT2

更改以上代码以使用不同的淡入和淡出过渡时间

$(document).ready(function() {        
    $(".title").hover(
        function() {
            $(this).data("mouse_hover", true);
            var self = $(this);
            setTimeout(function() {
                if (self.data("mouse_hover") === true) {
                    self.next(".deleteLink").show();
                }
            }, 500);
        },   
        function() {
            $(this).data("mouse_hover", false).next(".delete").hide();
        }        
    );
    $(".deleteLink").click(function(e) {
        e.preventDefault();
        $(this).text("deleted").prev(".title").slideUp(function() {
            $(this).hide();   
        });
    });
});    ​
相关文章：