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 ?
Merci de tout de coeur de votre aide ^^
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 ^^