javascript - ホバーイベントの削除ボタン

Question

hoverIntentに本当に問題があります。

http://jsfiddle.net/5fwqL/

私が欲しいもの：

1. テキストに約500ミリ秒間カーソルを合わせると、deletetextが表示されます。
2. 削除ボタンを押すと、テキストを削除したい
3. deletetextを押さずにテキストを終了する場合は、hide（）を表示します。

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

このフィドルを見てください 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

フェードインとフェードアウトに異なる遷移時間を使用するように上記のコードを変更しました

Answer 2

$(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();   
        });
    });
});    ​