読者です 読者をやめる 読者になる 読者になる

動的に追加される要素に対する .hover は mouseenterとmouseleaveで対処する

hoverを使いたかった

CoffeeScriptです

$("#hoe").hover(
    -> $(@).attr("src", "image1")
    -> $(@).attr("src", "image2")
)

でも、$.ajaxでとってきた(Callback)動的な要素に対しては結局そのままhoverはつかえなかった。じゃあこれは?

$("hoge").live("hover",
    -> $(@).attr("src", "image1")
    -> $(@).attr("src", "image2")
)

理論上できるようなきがするんだけど、うまくいかなかった。
そこでもう一つマウスイベントをとってくるのにmouseenterとmouseleaveというのがあると知った
Blog not found

$('.reply').live("mouseenter", ->
    $(@).attr('src', './static/image/reply_hover.png')
)
$('.reply').live("mouseleave", ->
    $(@).attr('src', './static/image/reply.png')
)

こんな感じにしてやると、 .hoverっぽくやれる。ただもっと複雑に、「この画像をホバーすると画像が切り替わり、また、画像をクリックすると特定の画像に切り替わる」という動作にはなかなか対応できなかった。以下苦肉の策。

$('.fav').live("mouseenter", ->
        if $(@).attr('src') == './static/image/favorite_on.png'
            return false
        else if $(@).attr('src') == './static/image/favorite_hover.png'
             return false
        $(@).attr('src', './static/image/favorite_hover.png')
    )
TODO:既にfavってるものに対しての挙動がおかしい
$('.fav').live("mouseleave", ->
    if $(@).attr('src') == './static/image/favorite_on.png'
        return false
    $(@).attr('src', './static/image/favorite.png')
)

すでにある特定の画像なら return false で返してやるとかやったけど、なんか結局いまいちうまくいかなかったので、 .hover な挙動は諦めた。まあ、UX的にもそんなに重要じゃないし。