Tenho o seguinte código:
.player-info .episodios-lista .lista-episodios{
width:100%;
height:100%;
overflow-x:hidden;
overflow-y:auto;
box-sizing:border-box;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
justify-content: center;
-webkit-justify-content: center;
}
.player-info .episodios-lista .lista-episodios .thumb-box{
width:300px;
height:200px;
display:block;
float:left;
margin:15px;
margin-bottom:30px;
box-sizing:border-box;
border-radius:7px;
position:relative;
background-image:url(http://thumbs.bluanime.com/small/webp/1/01/01.webp);
background-size:cover;
background-repeat:no-repeat;
background-position:center;
font-family: 'Open Sans', sans-serif;
color:#fff;
}
.player-info .episodios-lista .lista-episodios .thumb-box .episodio-data{
width:100%;
height:100%;
position:absolute;
top:0; left:0;
border-radius:7px;
box-sizing:border-box;
padding:10px;
background:rgba(0, 0, 0, 0.6);
z-index:1;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
text-align:center;
line-height:180px;
}
.player-info .episodios-lista .lista-episodios .thumb-box:hover
.player-info .episodios-lista .lista-episodios .thumb-box .episodio-data{
visibility: visible;
opacity: 1;
cursor:pointer;
}
<div class="player-info">
<div class="episodios-lista">
<div class="lista-episodios">
<div class="thumb-box">
<div class="episodio-data">
Overlay com hover
</div>
</div>
</div>
</div>
</div>
Cujo hover não funciona com as classes definidas dessa forma, mas quando removo as classes dos elementos anteriores, deixando apenas a classe do elemento em questão, o hover funciona perfeitamente, como mostrado aqui:
.lista-episodios{
width:100%;
height:100%;
overflow-x:hidden;
overflow-y:auto;
box-sizing:border-box;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
justify-content: center;
-webkit-justify-content: center;
}
.thumb-box{
width:300px;
height:200px;
display:block;
float:left;
margin:15px;
margin-bottom:30px;
box-sizing:border-box;
border-radius:7px;
position:relative;
background-image:url(http://thumbs.bluanime.com/small/webp/1/01/01.webp);
background-size:cover;
background-repeat:no-repeat;
background-position:center;
font-family: 'Open Sans', sans-serif;
color:#fff;
}
.episodio-data{
width:100%;
height:100%;
position:absolute;
top:0; left:0;
border-radius:7px;
box-sizing:border-box;
padding:10px;
background:rgba(0, 0, 0, 0.6);
z-index:1;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
text-align:center;
line-height:180px;
}
.thumb-box:hover
.episodio-data{
visibility: visible;
opacity: 1;
cursor:pointer;
}
<div class="player-info">
<div class="episodios-lista">
<div class="lista-episodios">
<div class="thumb-box">
<div class="episodio-data">
Overlay com hover
</div>
</div>
</div>
</div>
</div>
Mas por que isso acontece? Uma vez que o estilo está sendo aplicado a div e a ordem das classes até o elemento não está errada, por que não funciona com eventos como o hover?
Não gostaria de usar a classe do elemento pura, pois tenho outros elementos com a mesma classe, então por questão de organização gosto de organizar as classes dessa foram.