26367 sujets

CSS et mise en forme, CSS3

Bonjours à tous et à toutes,

J'essaye de mettre un hover sur un "a" qui activera une "div" et un "p" à l'intérieur...
En css cibler un enfant descendant ou 2 enfants suivant c'est possible mais je ne sais pas pourquoi ici ça ne s'applique pas ?

Je ne sais pas si la meilleur façon est css3 ou jQuery ?


<div class="wrapper_list">
            <div class="mainlist">
              <div id="listcontent">
                
                <ul>
                  <li id="work" class="graphisme">
                    <a id="linkwork" href="#">le beau projet</a>
                    <div class="previework"><p data-text="descriptiondescriptiondescriptiondescrip">descriptiondescriptiondescriptiondescrip</p>
                    </div>
                  </li>

                  <li id="work" class="graphisme">Un bon gros projet badass
                    <div class="previework"><p>descriptiondescriptiondescriptiondescrip</p>
                    </div>
                  </li>
                </ul> 

              </div>
            </div>
          </div>




.wrapper_list{
        @extend %section_interior;
        @extend %relative;
        .nextlink{
           @extend %nextlink;
        }
        .mainlist{
          //position: relative;
          #listcontent{
              ul{
                list-style-type: none;
                margin: 0; padding: 0;
                #work{
                  @extend %relative;
                  //@extend %flexdisplay;
                  margin-bottom: 45px;
                  #linkwork{
                    text-decoration: none;
                    color: black;
                    font-size: 16px;
                    font-family : "Rubik-Medium";
                  }
                  .previework{
                    position: absolute;
                    top: 0;
                    left: 0;
                    font-size: 55px;
                    overflow: hidden;
                    flex: 1;
                    width: 100%;
                    margin-left: 5px;
                    opacity: 0;
                    transform: translateY(-40%);
                    transition: .4s;
                    font-size: 5.5em;
                    p{
                     width: 100%;
                     transform: translateX(100%); 
                     margin: 0; padding: 0;                    
                     color: $color_txt_glitch;
                     position:relative;
                    &::after{
                      content:attr(data-text);
                      position:absolute;
                      left:2px;
                      text-shadow:-1px 0 $txt_glitch_shadow1;
                      top:0;
                      color: $color_txt_glitch;
                      background: $bg_glitch;
                      overflow:hidden;
                      clip:rect(0,850px,0,0); 
                      animation:anime_glitch_1 4s infinite linear alternate-reverse;
                      }
                    &::before{
                      content:attr(data-text);
                      position:absolute;
                      left:-2px;
                      text-shadow:1px 0 $txt_glitch_shadow2; 
                      top:0;
                      color: $color_txt_glitch;
                      background: $bg_glitch;
                      overflow:hidden;
                      clip:rect(0,850px,0,0); 
                      animation:anime_glitch_2 4s infinite linear alternate-reverse;
                      } 
                    }
                  }
                  #linkwork::hover .previework{
                    transition: .8s;
                    opacity: .1;
                    p{
                    animation-name: text_preview;
                    animation-timing-function: linear; 
                    animation-direction: reverse;
                    animation-iteration-count: infinite;
                    animation-fill-mode: backwards;
                    animation-duration: 12s;
                      }
                    }
                }
              }
            }
          }



Merci de tout de coeur de votre aide ^^
c'est bon trouvé !! j'ai réorganisé mon html plus simplement:

<ul>
                  <li id="work" class="graphisme">
                    <a href="#" id="linkwork">graphisme</a>
                    <div class="previework" data-text="descriptiondescriptiondescriptiondescrip">descriptiondescriptiondescriptiondescrip
                    </div>
                  </li>

                  <li id="work" class="illustration">
                    <a href="#" id="linkwork">illustration</a>
                    <div class="previework" data-text="descriptiondescriptiondescriptiondescrip">descriptiondescriptiondescriptiondescrip
                    </div>
                  </li>
                  
                </ul> 


et le scss

 #linkwork:hover{
                    color: red;
                  }  
                  #linkwork:hover + .previework{
                      transition: .8s;
                      opacity: .1;
                        animation-name: text_preview;
                        animation-timing-function: linear; 
                        animation-direction: reverse;
                        animation-iteration-count: infinite;
                        animation-fill-mode: backwards;
                        animation-duration: 12s; 
                  }  
                }
Meilleure solution