javascript - 我如何制作这种悬停效果(悬停 1 按钮以更改元素的 ID，然后在悬停时它会变回其原始 ID？)[jquery，css3]

Question

所以我有一段最初的 ID 是:#main

我有一个按钮:#button1

所以我想要发生的是，当我将鼠标悬停在按钮上时，我想将段落的 ID 更改为:#intro

(具有 CSS3 样式)

当我将鼠标悬停在按钮上时，它应该将段落的 ID 更改为:#outro

(也有 CSS3 样式)

我是这样做的:

js

$(document).ready(function(){  
    $("#button1").hover(function(){
        $("#main").attr("id","intro");
    },function(){
        $("#intro").attr("id","outro");
    });  
});

CSS

#main{
    color:red;
}
#intro{
    -webkit-animation: recolor .5s;
    color:blue; 
}
@-webkit-keyframes recolor {
    from{
        color:red;
    }
    to{
        color:blue;
    }
}
#outro{
    -webkit-animation: recolorout .5s;
    color:red;  
}
@-webkit-keyframes recolorout {
    from{
        color:blue;
    }
    to{
        color:red;
    }
}

这是有效的，问题是我只能这样做一次。我知道，因为我没有将它改回#main

但是它把这个放在哪里:

$("#outro").attr("id","main");

以便在悬停过程后将段落更改回其初始状态？

或者有其他解决方案吗？提前致谢

This is the js fiddle.

Answer 1

与其使用 jQuery 循环悬停效果，不如使用 CSS？

http://jsfiddle.net/JtKFk/

HTML:

<p class="hoverable">hello world this is a test</p>

CSS:

.hoverable{
   -webkit-animation: recolorout .5s;
   color:red;  
}

.hoverable:hover{
   -webkit-animation: recolor .5s;
   color:blue;  
}

@-webkit-keyframes recolor {
   from{
       color:red;
   }
   to{
       color:blue;
    }
}

@-webkit-keyframes recolorout {
   from{
       color:blue;
   }

   to{
       color:red;
   }
}