javascript 悬停事件上的删除按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11522486/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Delete button on hover event
提问by Plexus81
I'm having real problem with a hoverIntent.
我在使用hoverIntent 时遇到了真正的问题。
What I want:
我想要的是：
- When hovering over the text for about 500msI want the deletetext to show.
- If I press the deletebutton i want the text to be deleted
- If I go out of the text without pressing deletetext I want it to hide()
- 将鼠标悬停在文本上约500 毫秒时，我希望显示 deletetext。
- 如果我按下删除按钮，我希望文本被删除
- 如果我在不按 deletetext 的情况下退出文本，我希望它隐藏（）
javascript
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
html
<div>
<div class='title'>TitleText</div>
<div class='delete'><a class='deleteLink' href="#">delete...</a></div>
</div>
** Forgot to mention that It has to work in IE8, so I have to use old style! **
** 忘了说它必须在 IE8 下工作，所以我必须使用旧样式！**
回答by joevallender
Have a look at this fiddle http://jsfiddle.net/joevallender/42Tw8/
看看这个小提琴 http://jsfiddle.net/joevallender/42Tw8/
You can use CSS to handle showing and hiding the delete link. Say you nested your HTML like this
您可以使用 CSS 来处理显示和隐藏删除链接。假设您像这样嵌套了 HTML
<div class='title'>
TitleText 1
<a class='delete' href="#">delete...</a>
</div>
Then you can use CSS like this
然后你可以像这样使用 CSS
.delete{
color: red;
display: none;
}
.title:hover .delete {
display:block
}
It's quite a common pattern for things like delete/edit links actually. The .title:hover .deletemeans the CSS the .deletewill have when a parent .titleis being hovered on. You could have also added an arbitrary class to your parent in your example and used that if you wanted to keep the same HTML arrangement.
实际上，对于删除/编辑链接之类的事情来说，这是一种非常常见的模式。该.title伪：悬停.delete意味着CSS的.delete当父将有.title伪正徘徊在。您还可以在您的示例中向您的父级添加一个任意类，并在您想要保持相同的 HTML 排列时使用它。
Then use the JS below to handle the click
然后使用下面的JS来处理点击
$(document).ready(function(){
$('.delete').click(function(){
$(this).parent().remove();
return false;
});
});
Does that make sense? It's slightly differently arranged to your starting point
那有意义吗？它与您的起点略有不同
EDIT
编辑
For the fade in/out I mentioned in the comment, you could use something like this
对于我在评论中提到的淡入/淡出，你可以使用这样的东西
.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
编辑2
Changed the above code to use different transition times for fade in and fade out
更改了上面的代码以使用不同的过渡时间进行淡入淡出
回答by ümit KOL
$(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();
});
});
}); ?
