Question

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

.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元素与伪类匹配时将样式应用于:befor .summary_props_trans e伪元素，则需要编写.summary_props_trans:hover:before或{ {1}}而是。请注意，伪元素位于伪类之后（事实上，在整个选择器的最后）。

所以，只需添加

.summary_props_trans:visited:before

或

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

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

隐藏透明：在div悬停之前

1 个答案: