Question

所以我试图只用css制作图片库。

我希望文本div涵盖我的所有＆＃34;背景图像＆＃34;当我把光标放在上面时。现在文本的背景并没有完全覆盖它。

感谢任何帮助。

<!doctype html>
<head>
<meta charset="UTF-8">
</head>

<style>

@media only screen and (min-width: 769px) {
.gridContainer {
width: 88.2%;
max-width: 1232px;
padding-left: 0.9%;
padding-right: 0.9%;
margin: auto;
}

#mainWrapper{
width:100%; 
}
.contentor{
display:block;
width:33.3%;
height:auto;
position:relative;
margin:0;
float:left;
}
.imagem{
display:block;    
position:relative;
width:100%;
height:auto;
left:0;
top:0;
}
.texto{
display:block;
z-index:100;
position:absolute;  
font-size: 3em;
font-weight:bold;
left:50%;
top:35%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align:center;
background: rgba(153, 102, 0, 0.6);
transition: opacity 2s;   /* efeito trans */
opacity:0;
}

.contentor:hover .texto{
  opacity:1;
}

}

 </style>

    <div class="contentor">
        <img class="imagem" src="IMGS/index_amb.jpg"/>
        <p class="texto">texto por cima</p>
    </div>

    <div class="contentor">
        <img class="imagem" src="IMGS/index_fuller.jpg"/>
        <p class="texto">texto por cima</p>
    </div>

    <div class="contentor">
        <img class="imagem" src="IMGS/index_ft_rain.jpg"/>
        <p class="texto">texto por cima</p>
    </div>

    <div class="contentor">
        <img class="imagem" src="IMGS/index_manual.jpg"/>
        <p class="texto">texto por cima</p>
    </div>

    <div class="contentor">
        <img class="imagem" src="IMGS/index_pecados.jpg"/>
        <p class="texto">texto por cima</p>
    </div>

    <div class="contentor">
        <img class="imagem" src="IMGS/index_e_r.jpg"/>
        <p class="texto">texto por cima</p>
    </div>
</div>

Answer 1

查看jQuerys hover（）和鼠标over（）方法。

对不起。我还没有对此进行过测试，但我认为您需要将CSS元素设置为.hidden，然后使用mouseenter，mouseover事件重置CSS。

CSS3：当悬停图像div时显示隐藏的文本div

1 个答案: