1
Я хочу сделать ящик, который, когда я парить на этой коробке мой сНу шоу с fadeInUp анимации и после Mouseover анимации fadeOutDown был нагрузкойпоказать DIV с fadeInUp по наведению и fadeOutDown при наведении курсора мыши
Постараюсь это, но Бесполезный «т работы:
$(".link-box").hover(function(event){
$('div[class^='link-txt-']').addClass('fadeInUp visible');
},function(){
$('div[class^='link-txt-']').removeClass('fadeOutDown');
});.links {
width: 100%;
height: 43vh;
}
.link-section {
float: left;
width: 33.333%;
text-align: center;
\t position:relative;
}
.link-box {
width: 50%;
border-radius: 100%;
height: 34vh;
border: 2px solid #0d0d0d;
margin: auto;
}
.link-img {
width: 100%;
border-radius: 100%;
height: 34vh;
}
div[class^="link-txt"] {
border-radius: 100%;
height: 34vh;
position: absolute;
top: 0;
width: 50%;
text-align: center;
background: rgba(13,13,13,0.7);
\t display:none;
\t border:1px solid rgba(13,13,13,0.7);
}
div[class^="link-txt"] span {
width: 80%;
height: 15vh;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
color: #FFF;
left: 0;
right: 0;
}
.visible {display:block;}
.hidden {display:none;}\t <div class="links">
\t <div class="link-section">
\t <div class="link-box">
\t <img src="images/slider/2.jpg" class="link-img" alt="Forum" />
\t <div class="link-txt-1"> <span> Test mikonim forum ro 1 2 3 4 atefe eshghame </span> </div>
\t </div>
\t </div>
\t <div class="link-section">
\t <div class="link-box">
\t <img src="images/slider/2.jpg" class="link-img" alt="Forum" />
\t <div class="link-txt-2"> <span> Test mikonim forum ro 1 2 3 4 6 alireza miodi atefe eshghe alirezas </span> </div>
\t </div>
\t </div>
\t <div class="link-section">
\t <div class="link-box">
\t <img src="images/slider/2.jpg" class="link-img" alt="Forum" />
\t <div class="link-txt-3"> <span> Test mikonim forum ro 1 2 3 4 </span> </div>
\t </div>
\t </div>
\t </div>Я с помощью этого файла CSS тоже: https://daneden.github.io/animate.css/
Какого результата вы получаете вместо вашей дивы отображающей? – ASCIIThenANSI