CSS 透明度仅适用于 Mozilla

Question

我想制作一个透明的盒子内容，当您将鼠标悬停在上面时它是正常图像。它在不透明的情况下与 Mozilla 配合得很好，但是当我添加其他东西以便它在其他浏览器上工作时，没有任何效果。

.BoxPage a {
  zoom: 1;
  width: 100%;
  /* Theoretically for IE 8 & 9 (more valid) */
  /* ...but not required as filter works too */
  /* should come BEFORE filter */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  /* This works in IE 8 & 9 too */
  /* ... but also 5, 6, 7 */
  filter: alpha(opacity=60);
  /* Older than Firefox 0.9 */
  -moz-opacity: 0.6;
  /* Safari 1.x (pre WebKit!) */
  -khtml-opacity: 0.6;
  /* Modern!
    	/* Firefox 0.9+, Safari 2?, Chrome any?
    	/* Opera 9+, IE 9+ */
  opacity: 0.6!important;
  -ms-filter: ”alpha(opacity=60)”;
  -webkit-opacity: 0.6;
}

.BoxPage a:hover {
  zoom: 1;
  width: 100%;
  /* Required for IE 5, 6, 7 */
  /* ...or something to trigger hasLayout, like zoom: 1; */
  /* Theoretically for IE 8 & 9 (more valid) */
  /* ...but not required as filter works too */
  /* should come BEFORE filter */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  /* This works in IE 8 & 9 too */
  /* ... but also 5, 6, 7 */
  filter: alpha(opacity=100);
  /* Older than Firefox 0.9 */
  -moz-opacity: 1;
  /* Safari 1.x (pre WebKit!) */
  -khtml-opacity: 1;
  /* Modern!
    	/* Firefox 0.9+, Safari 2?, Chrome any?
    	/* Opera 9+, IE 9+ */
  opacity: 1!important;
  -ms-filter: ”alpha(opacity=100)”;
  -webkit-opacity: 1;
}

<div class="BoxPage"><a>some text</a></div>

而且透明度仍然只适用于 Mozilla。

Answer 1

简单地:

element {
    opacity: 0;
    transition: opacity 1s ease-out;
}

element:hover {
    opacity: 1;
}

工作示例:

.box {
    width: 100px;
    height: 100px;
    background-color: rgb(255, 0, 0);
    opacity: 0;
    transition: opacity 1s ease-out;
}
    
.box:hover {
    opacity: 1;
}

<h2>Hover over the space below...</h2>

<div class="box"></div>