3

我在这里要做的是在这个 div 悬停时进行转换。

一切正常，只是过渡什么都不做。我尝试使用transition: all,transition: opacity和的过渡属性transition: background。但它们都不起作用。

是display酒店在做这件事。因为当我把它拿出来时，它就起作用了。我还能如何解决这个问题？因为我显然想保留该display属性，因为它适用于所有浏览器，无论老少。

这是我目前所拥有的：

.matrix-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(0,0,0); /* fallback */
    background: rgba(0,0,0,0);
    color: #fff;
    display: none;
    -webkit-transition: background 2s;
    -o-transition: background 2s;
    -moz-transition: background 2s;
    transition: background 2s;
}

a:hover .matrix-overlay {
    display: block;
    background: rgba(0,0,0,0.5);
}

我不介意我是否使用不透明度或背景或其他任何东西来控制褪色，我只是不知道还能做什么。

4

4 回答 4

5

看起来CSS 转换不支持display 属性（另请参阅此SO 问题）。

考虑到这一点，您有多种选择。您最初可以在过渡前将宽度/高度设置为 0，或者将元素从页面上偏移（类似于margin-left: -9999px;），或者将不透明度设置为 0。

在你的情况下，我可能会使用这个：

.matrix-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(0,0,0); /* fallback */
    background: rgba(0,0,0,0);
    color: #fff;
    display: block;
    margin-left: -9999px; /* hide element off the page */
    -webkit-transition: background 2s;
    -o-transition: background 2s;
    -moz-transition: background 2s;
    transition: background 2s;
}

a:hover .matrix-overlay {
    margin-left: 0; /* reset element position */
    background: rgba(0,0,0,0.5);
}
于 2011-05-10T14:25:38.947 回答
3

这就是我最终做的事情：

    .matrix-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(0,0,0); /* fallback */
    background: rgba(0,0,0,0.7);
    color: #fff;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: opacity 0.2s ease 0s;
    -o-transition: opacity 0.2s ease 0s;
    -moz-transition: opacity 0.2s ease 0s;
    transition: opacity 0.2s ease 0s;
}

a:hover .matrix-overlay {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transition: opacity 0.15s ease 0s;
    -o-transition: opacity 0.15s ease 0s;
    -moz-transition: opacity 0.15s ease 0s;
    transition: opacity 0.15s ease 0s;
}
于 2011-05-16T18:34:40.507 回答
0

您可以尝试以下方法：

.matrix-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(0,0,0); /* fallback */
    background: rgba(0,0,0,0.7);
    color: #fff;
    opacity: 0;
    pointer-events:none;
    transition: opacity 0.2s ease 0s;
}

a:hover .matrix-overlay {
    pointer-events:auto;
    opacity: 1;
    transition: opacity 0.15s ease 0s;
}

一起使用pointer-events:none和opacity:0将具有与 几乎相同的效果display:none，但现在过渡应该可以正常工作。

于 2013-06-23T17:51:29.040 回答
0

您可以使用clip而不是显示，因为元素是绝对定位的

工作示例

例如

.matrix-overlay {
    ...other properties, not display ...
    clip: rect(1px 1px 1px 1px); /* IE7 */
    clip: rect(1px,1px,1px,1px);

}

a:hover .matrix-overlay {
    ..other properties, not display ...
     clip: rect(auto); /* IE7 */
     clip: auto;
}

我输入了古怪的 IE7 代码剪辑代码以获取信息，尽管 IE 无论如何都不做转换，如果你愿意，你可以向它提供显示代码，但这种方式保持它们相同；）

于 2011-05-10T14:42:52.793 回答