1

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.

0

2 Respostas 2

2

Tens uma classe .thumb-box a mais, junto a .episodio-data {, que está a estragar tudo.

Em vêz de:

.player-info .episodios-lista .lista-episodios .thumb-box:hover .thumb-box.episodio-data {

deve ser:

.player-info .episodios-lista .lista-episodios .thumb-box:hover .episodio-data {

Pois quando estão juntas .thumb-box.episodio-data isso quer dizer um elemento que tem ambas as classes.

.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 .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>

5
  • Eu quero usar as classes antes de .episodio-data no hover também .player-info .episodios-lista .lista-episodios .thumb-box .episodio-data, esqueci de editar no Fiddle
    – Leo Letto
    Commented 26/04/2017 às 12:20
  • @LeoLetto podes mostrar um exemplo que não consigas pôr a funcionar?
    – Sergio
    Commented 26/04/2017 às 12:22
  • Coloquei o código na pergunta, meio que após o hover o css vai entender o próximo elemento como um "this > child" ou ele vai pegar qualquer elemento com a classe .episodio-data mesmo que fora do elemento em que o hover foi dado?
    – Leo Letto
    Commented 26/04/2017 às 12:25
  • @LeoLetto vai entender como > child e atuar somente sobre a descendência desse elemento que tem o :hover
    – Sergio
    Commented 26/04/2017 às 12:55
  • @LeoLetto conseguiste resolver o problema?
    – Sergio
    Commented 26/04/2017 às 20:58
0

Você esqueceu uma vírgula e de adicionar o :hover nesta parte:

.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;
  }

Tem que ser assim:

.player-info .episodios-lista .lista-episodios .thumb-box:hover, 
.player-info .episodios-lista .lista-episodios .thumb-box:hover .episodio-data {
    visibility: visible;
    opacity: 1; 
    cursor:pointer;
  }

Vide exemplo:

.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: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>

4
  • Interessante, mas por que no segundo exemplo funciona mesmo sem a vírgula?
    – Leo Letto
    Commented 26/04/2017 às 12:40
  • @LeoLetto Porque basicamente o que está escrito no segundo exemplo é o mesmo que: .thumb-box:hover .episodio-data Commented 26/04/2017 às 15:45
  • @LeoLetto Tem a mesma função da linha depois da vírgula: .player-info .episodios-lista .lista-episodios .thumb-box:hover .episodio-data Commented 26/04/2017 às 15:45
  • @LeoLetto A vírgula serve para separar duas expressões. É como se você estivesse aplicando os estilos para ambas expressões. Ou seja, todas as suas propriedades serão aplicadas tanto para as divs de classe: .thumb-box e .episodio-data quando você passar o mouse sobre .thumb-data. Commented 26/04/2017 às 15:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .