隐藏透明：在div上悬停前

我有一个div显示图像，然后有半高半透明块，我在其上写文本。这是通过使用“之前”使用本网站的一些代码完成的。如何隐藏悬停的透明块？我尝试了所有我能想到的。我无法使用标准透明图像，因为每个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; 
}

来源

2015-03-24 sharon

如果您只是希望在.summary_props_trans元素相匹配的伪类样式应用到.summary_props_trans:beforè伪元素，你需要写.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/

来源

2015-03-25 00:02:14 dyaa

@sharon所以请它作为解决，以帮助其他人:) ... – dyaa 2015-03-25 00:12:25

有我尚未完成？也许你太快了。你的回答鼓励我研究伪类。我应该知道这一点，但没有把2和2放在一起。有很多，但我不知道如何充分利用它们！再次感谢。 – sharon 2015-03-25 00:32:46

您是否善于解释原因：.summary_props_trans：hover：before + table tr td {display：none; }也不隐藏表？ div是图像上的表格的透明背景。你的代码允许我隐藏背景，但我想隐藏桌面悬停也。我知道这是额外的，所以你的答案仍然很好。 – sharon 2015-03-26 01:19:47

隐藏透明：在div上悬停前

回答

相关问题