html - 隐藏一个透明的 :before div on hover

Question

我有一个显示图像的 div，然后有一个半高的半透明 block ，我可以在上面写文本。这是使用该站点中使用“之前”的一些代码完成的。如何在悬停时隐藏这个透明 block ？我已经尝试了所有我能想到的。我不能使用标准的透明图像，因为每个 div 实例上的图像都不同，而且它们不在现场。以这种方式使用 :before 并不是我完全理解的事情，但我怀疑它会使事情复杂化。

.summary_props_trans {
   position: relative; 
   font-family:'Melbourne', Arial, sans-serif;
   font-size: 2vmin;
   color: black;
   font-weight:normal;
   z-index: 0;  
   width: 220px;
   height: 165px;
   margin: 5px;
   float: left;
   padding: 5px 10px 10px 5px;  
   background-repeat: no-repeat;
   background-size:cover;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
}

.summary_props_trans:hover {
   filter:alpha(opacity=80);  
   -moz-opacity:0.8;  
   -khtml-opacity: 0.8;  
   opacity: 0.8; 
}

.summary_props_trans:before{
   content:''; 
   display: block;
   position: absolute; 
   background: white; 
   opacity: .5;
   filter:alpha(opacity=50);
   top: 0; right: 0; bottom: 0; left: 0;
   margin: 0px 0px 50px 0px;
   z-index: -1;
}

Answer 1

如果您只是想将样式应用到 .summary_props_trans :before 伪元素，当 .summary_props_trans 元素匹配伪类时，您需要编写 .summary_props_trans:hover:before 或 .summary_props_trans:visited:before 。注意伪元素出现在伪类之后(事实上，在整个选择器的最后)。

所以，简单地添加

.summary_props_trans:hover:before{
    display:none;
}

或

.summary_props_trans:hover:before {
  filter:alpha(opacity=0);  
  -moz-opacity:0;  
  -khtml-opacity: 0;  
  opacity: 0; 
}

这是一个例子 http://jsfiddle.net/dyaa/kn0z52ya/