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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

http://caniuse.com/

Less

http://lesscss.org

Cool Libraries

Bootstrap from Twitter

Jetstrap

这是一个创建于 3553 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

比如说我这样写的话:

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

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

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

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

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

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

11 条回复 2016-04-25 10:33:16 +08:00

Pastsong

2016-03-26 13:18:10 +08:00

用 jQuery 可以绑个 mouseover 然后 addClass

sennes

2016-03-26 13:22:32 +08:00

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

sox

2016-03-26 13:22:37 +08:00

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

Pastsong

2016-03-26 13:22:54 +08:00

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

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

sox

2016-03-26 13:23:00 +08:00

h1.pulse:hover { }

sennes

2016-03-26 13:28:12 +08:00

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

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

Cloudee

2016-03-26 13:42:54 +08:00

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

sennes

2016-03-26 13:46:26 +08:00 via iPhone

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

think2011

2016-03-26 13:48:23 +08:00 nbsp;

没问题的

h1:hover {
animation-name: pulse;
}

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

sennes

2016-03-26 14:00:05 +08:00 via iPhone

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

xieranmaya

2016-04-25 10:33:16 +08:00

就是楼上的楼上的方法