javascript - 悬停事件上的删除按钮

Question

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

http://jsfiddle.net/5fwqL/

我想要的:

1. 当鼠标悬停在文本上大约 500 毫秒时，我希望显示删除的文本。
2. 如果我按下删除按钮，我希望删除文本
3. 如果我不按删除文本就退出文本，我希望它隐藏()

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 中工作，所以我必须使用旧样式! **

Answer 1

看看这个 fiddle 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

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