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>

Answer 2

我认为你应该在CSS规则中写下“常规”opacity，在所有前缀版本后写。

html, body { margin: 0; height: 100%; } .wrapper { background: green; height: 100%; } .inner { position: relative; top: 100px; height: 60%; margin: 0 100px 100px 100px; background: #fff; filter: alpha(opacity=60); -moz-opacity: 0.6; -khtml-opacity: 0.6; -ms-filter: ”alpha(opacity=60)”; -webkit-opacity: 0.6; opacity: 0.6; } .inner:hover { filter: alpha(opacity=60); -moz-opacity: 1; -khtml-opacity: 1; -ms-filter: ”alpha(opacity=100)”; -webkit-opacity: 1; opacity: 1; }

<div class="wrapper"> <div class="inner"></div> </div>

Answer 3

您可以使用rgba作为背景色，这样您就可以在opacity中添加opacity而不是css属性。请参阅下面的代码。

   
*{ box-sizing: border-box; -webkit-box-sizing: border-box; padding: 0; margin: 0; }
 .box-wrap 

{ 
 width: 100%;
 height: 150px; 
 position: relative;
 background: url(https://i.stack.imgur.com/seaPw.png); 
}
.box
{ 
background-color: rgba(0,0,0,0.5); 
width: 100%; 
height: 100%; 
margin: 0 auto; 
color: #fff; 
position: absolute;
top: 0; 
left: 0;
}

.box:hover
{ 
background-color: rgba(0,0,0,0); /* last value 0.5 represents opacity, first three numbers represents color value. */
transition: 0.5s ease; 
-webkit-transition: 0.5s ease; 
}

   
 <div class="box-wrap"><div class="box">Hover me!</div></div>

CSS透明度仅适用于Mozilla

3 个答案: