Why doesn’t :Hover work this way?

Asked

Viewed 190 times

1

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 the classes defined in this way, but when I remove the classes from the previous elements, leaving only the class of the element in question, 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 div and the order of the classes until the element is not wrong, why doesn’t it work with events like Hover?

I would not like to use the class of the pure element, because I have other elements with the same class, so for the sake of organization I like to organize the classes of that were.

css hover

2 answers

2

You have a class .thumb-box plus, along with .episodio-data {, who is ruining everything.

At times:

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

must be:

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

'Cause when they’re together .thumb-box.episodio-data that means an element that has both the 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>

  • I want to use the classes before . episodio-data in Hover also . player-info . episodios-list . list-episodes . Thumb-box . episodio-data, forgot to edit in Fiddle

  • @Leoletto can show an example you can’t make work?

  • I put the code in the question, kind of after Hover the css will understand the next element as a "this > Child" or it will take any element with the class. episode-date even if outside the element in which the Hover was given?

  • @Leoletto will understand how > child and act only on the offspring of this element that has the :hover

  • @Leoletto you have solved the problem?

0


You forgot a comma and to add the :hover in this part:

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

It has to be like this:

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

See example:

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

  • Interesting, but why in the second example works even without the comma?

  • @Leoletto Because basically what is written in the second example is the same as: .thumb-box:hover .episodio-data

  • @Leoletto Has the same function as the line after the comma: .player-info .episodios-lista .lista-episodios .thumb-box:hover .episodio-data

  • @Leoletto The comma serves to separate two expressions. It’s like you’re applying the styles to both expressions. That is, all your properties will be applied to both the class Divs: .thumb-box and .episodio-data when you hover over .thumb-data.

Browser other questions tagged css hover

You are not signed in. Login or sign up in order to post.