在悬停时隐藏透明 :before div

Question

我有一个显示图像的 div，然后有一个半高的半透明块，我可以在上面写文字。这是使用此站点中使用 "before" 的一些代码完成的。如何在悬停时隐藏这个透明块？我已经尝试了所有我能想到的。我无法使用标准透明图像，因为图像在 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 元素匹配伪 class 时将样式应用于 .summary_props_trans :before 伪元素，您需要编写 .summary_props_trans:hover:before 或 .summary_props_trans:visited:before 代替。请注意伪元素出现在伪 class 之后（事实上，在整个选择器的最后）。

所以，只需添加

.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/

在悬停时隐藏透明 :before div

hide a transparent :before div on hover

html

css

pseudo-element