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

V2EX = way to explore

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

For Existing Member Sign In

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

This topic created in 3694 days ago, the information mentioned may be changed or developed.

我想使用的是 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 replies • 2016-04-25 10:33:16 +08:00

Pastsong

Mar 26, 2016

用 jQuery 可以绑个 mouseover 然后 addClass

sennes

Mar 26, 2016

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

sox

Mar 26, 2016

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

Pastsong

Mar 26, 2016

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

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

sox

Mar 26, 2016

h1.pulse:hover { }

sennes

Mar 26, 2016

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

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

Cloudee

Mar 26, 2016

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

sennes

Mar 26, 2016 via iPhone

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

think2011

Mar 26, 2016

没问题的

h1:hover {
animation-name: pulse;
}

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

sennes

Mar 26, 2016 via iPhone

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

xieranmaya

Apr 25, 2016

就是楼上的楼上的方法