有没有办法减缓悬停效果？

Question

有没有办法减缓悬停效果？我的网站上有悬停效果(已删除),在图片悬停时显示文字.我想稍微减慢效果.图片切换的速度有点大.

我该怎么办？

Answer 1

你可以添加css3过渡:

-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;

Answer 2

这取决于你如何显示文本.如果您正在更改CSS属性,则可以使用CSS3过渡执行此操作.以下是一个例子.

HTML:

<div id="A"></div><div id="B"></div>

CSS:

div {
    height: 100px;
    width: 100px;
    position: absolute;
    top: 0;
    left: 0;

    -moz-transition: opacity 4s; /* Firefox */
    -webkit-transition: opacity 4s; /* Safari and Chrome */
    -o-transition: opacity 4s; /* Opera */
    transition: opacity 4s;
}
#A {
    background: red;
    opacity: 1;
    z-index: 1;
}
#B {
    background: blue;
    opacity: 0;
    z-index: 2;
}
#B:hover {
    opacity: 1;
}

演示

编辑:大卫托马斯告诉我,你无法通过过渡更改显示.我已经更新了上面的内容以使用不透明度.