Question

这是我的HTML

<img class="logo" src="css/images/logo.png" align="center"    onmouseover="this.src='css/images/logohov.png'" onmouseout="this.src='css/images/logo.png'"> </img>

有没有办法可以改变过渡时间？我添加了过渡：所有0.3s轻松;对于类徽标，但它没有做任何事情。

由于

Answer 1

您正在更改src属性，该属性不能与transition属性一起使用，即使您使用了css的内容属性，它也不能与转换一起使用，而是尝试两个img标记，并隐藏一个并在悬停时显示另一个转换。

Here是一些例子

Answer 2

仅当您更改 CSS属性时，转换属性才有效，在您的示例中，您更改 HTML属性。

尝试这样的事情：

<div class="logo" align="center" onmouseover="this.style.backgroundImage=\"url('css/images/logohov.png')\"" onmouseout="this.style.backgroundImage=\"url('css/images/logo.png')\""> </div>

Answer 3

我很幸运，只需添加

-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;

我的css上有关于标签的类，它影响了onmouseover和onmouseout的过渡时间（不使用任何：hover css）。

PS为了让onmouseover和onmouseout实现标签内的文本，我必须将链接的标签放在整个按钮周围，而不是在内部。

希望有所帮助！

在onmouseover和onmouseout上更改转换时间？

3 个答案: