I have the following code:
.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>Whose hover does not work with classes defined this way, but when I remove the classes from the previous elements, leaving only the class of the element in question, the hover works perfectly, as shown here:
.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> But why does this happen? Since the style is being applied to the div and the order of the classes until the element is not wrong, why does it not work with events like the hover?
I would not like to use the pure element class, as I have other elements with the same class, so for the sake of organization I like to organize the classes of that were.