将鼠标悬停在图像上时,您会看到它将被我的代码中的半透明背景替换.
透明背景应该覆盖所有图片,但是,它只覆盖文本所采用的区域.
无论盒子内的文字是什么,我如何确保它覆盖整个画面？
/*Programs*/
ul.img-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
ul.img-list li {
display: inline-block;
width: 100%;
height: 100%;
margin: 0;
position: relative;
}
div.text-content {
background: rgba(26,33,43,0.9);
color: white;
cursor: pointer;
display: table;
left: 0;
position: absolute;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
font-size: 20px;
font-family: Roboto;
line-height: 24px;
font-weight: 200;
text-align: center;
overflow-y: auto;
padding-right: 25px;
padding-left: 25px;
padding-top: 25px;
padding-bottom: 25px;
box-sizing: border-box;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: …如何应用display: none;第五个元素(标题为"SumoMe")并确保只隐藏SumoMe？
如果我使用a .sumome-share-client-animated.sumome-share-client-share { display: none; },则所有五个元素都会消失,因为它们具有相同的类.
<div data-sumome-share-pos="lp" class="sumome-share-client sumome-share-client-left-page sumome-share-client-light sumome-share-client-medium sumome-share-client-circle">
<a title="Facebook" class="sumome-share-client-animated sumome-share-client-share" data-sumome-share="facebook" href="javascript:void(0);" style="background: rgb(249, 199, 15); color: black; margin-bottom: 5px;"><img src="//sumome-140a.kxcdn.com/static/e712458c65fa75b6aaa4f4f9880230c43c634ce5/client/images/apps/9e8a4d2a-6f8c-415e-851b-bdfe4c01d5c1/facebook-black-60.png" alt="Facebook"></a>
<a title="Twitter" class="sumome-share-client-animated sumome-share-client-share" data-sumome-share="twitter" href="javascript:void(0);" style="background: rgb(249, 199, 15); color: black; margin-bottom: 5px;"><img src="//sumome-140a.kxcdn.com/static/e712458c65fa75b6aaa4f4f9880230c43c634ce5/client/images/apps/9e8a4d2a-6f8c-415e-851b-bdfe4c01d5c1/twitter-black-60.png" alt="Twitter">
</a><a title="Google+" class="sumome-share-client-animated sumome-share-client-share" data-sumome-share="googleplus" href="javascript:void(0);" style="background: rgb(249, 199, 15); color: black; margin-bottom: 5px;"><img src="//sumome-140a.kxcdn.com/static/e712458c65fa75b6aaa4f4f9880230c43c634ce5/client/images/apps/9e8a4d2a-6f8c-415e-851b-bdfe4c01d5c1/googleplus-black-60.png" alt="Google+"></a>
<a title="LinkedIn" class="sumome-share-client-animated sumome-share-client-share" data-sumome-share="linkedin" href="javascript:void(0);" style="background: rgb(249, 199, 15); color: black; margin-bottom: 5px;"><img …