CSS 中 :hover 有没有这样的用法?

[sennes]

我想使用的是 https://daneden.github.io/animate.css/

比如说我这样写的话:

<h1 class="animated infinite pulse">Nephovision</h1>

那么这个 h1 永远会显示 pulse 的效果

但是我希望仅当鼠标移动到<h1>上的时候才显示 pulse 的效果 不知道能不能通过 hover 的方法达到我的目的?

有没有办法可以直接在h1:hover { }中实现infinite pulse的效果?

(不直接复制别人css已经写了的东西)

我 CSS 学的不好，还请大家指教，谢谢大家。

[Pastsong]

用 jQuery 可以绑个 mouseover 然后 addClass

[sennes]

@Pastsong 谢谢你 :)
不过我还没接触过 jQuery 。如果没有直接用 CSS 实现的办法，我再去琢磨一下您的方案。(或者..复制 animate.css 里面的样式<--哈哈)

[sox]

h1,pulse:hover { } 不行吗..

[Pastsong]

https://github.com/daneden/animate.css/blob/master/source/attention_seekers/pulse.css

你也可以直接看别人 animate.css 的实现方法

[sox]

h1.pulse:hover { }

[sennes]

@Pastsong 嗯 我知道这也是一种方法。但是要复用好像有点麻烦，而且我引用 animate.css 就没有意义了.


@sox
唔我忘了说， pulse 是在 animate.css 里面的
而我的 h1 是在自己的 main.css 里面的
您的方案我试了一下好像暂时还不 work ，我再去琢磨一下。

[Cloudee]

:hover 里面只能自己写 css ，不能引入别人定义好的 class 的东西。当然如果对方有 less 或者 scss 的源码，你可以直接引进来，不过这样编译出来也是你的:hover 里面复制了.pulse 中的东西。建议是绑定 mouseover 和 mouseleft 事件，加上或者去掉.pluse

[sennes]

@Cloudee 好的谢谢。还没接触过 mouseover 那些。我去折腾一下。: )

[think2011]

没问题的

h1:hover {
animation-name: pulse;
}

http://jsbin.com/hasomivivu/edit?html,js,output

[sennes]

@think2011 非常感谢。这个方法似乎是比较适合我的。

[xieranmaya]

就是楼上的楼上的方法