У меня есть слайдер.Я хочу,что бы при наведении на одну из картинок слайда всплывала ссылка, которая будет находиться на той же картинке,на которую навелся.Но при наводе на другую картинку,ссылка всплывает на первой картинке.Вот код
<div class="work_examples_1">
<img class="work_examples_1_1" data-lazy="png/image 1.svg" style="margin:0 25px;" alt="">
<a class="work_examples_nav" href="">+<br>see more</a>
<img class="work_examples_1_2" data-lazy="png/image 2.svg" style="margin:0 25px;" alt="">
<a class="work_examples_nav_2" href="">+<br>see more</a>
</div>
Это один слайд с двумя картинками
.work_examples_nav{
z-index: 1000;
position: absolute;
font-family: Montserrat;
font-style: normal;
font-weight: 600;
font-size: 35px;
line-height: 43px;
color: #FFFFFF;
text-decoration: none;
text-transform: capitalize;
margin-right: 450px;
display: none;
transition: .2s linear;
}
.work_examples_1_1{
border-radius: 50%;
position: relative;
width: 405px;
height: 405px;
transition:.1s linear ;
background-image: linear-gradient(180deg, rgba(255,0,0,0.4) 0%, rgba(203,177,2,0.4) 97%)
,url(png/123.png);
border: 4px solid #E37121;
}
.work_examples_1_1:hover{
border: 8px solid #E37121;
cursor: pointer;
}
.work_examples_1_2{
border-radius: 50%;
position: relative;
width: 405px;
height: 405px;
transition:.1s linear ;
background-image: linear-gradient(180deg, rgba(165, 20, 125, 0.3) 0%, rgba(112, 17, 206, 0.3) 72.92%,
rgba(126, 49, 157, 0) 100%)
,url(png/1234.png);
border: 4px solid #A597B1;
}
.work_examples_1_2:hover{
border: 8px solid #A597B1;
cursor: pointer;
}
.work_examples_nav_2{
z-index: 1000;
position: absolute;
font-family: Montserrat;
font-style: normal;
font-weight: 600;
font-size: 35px;
line-height: 43px;
color: #FFFFFF;
text-decoration: none;
text-transform: capitalize;
margin-right: 450px;
display: none;
transition: .2s linear;
}
$(document).on('mouseout', '.work_examples_1_1', function() {
$('.work_examples_nav').fadeOut(0);
});
$(document).on('mouseover', '.work_examples_1_1', function() {
$('.work_examples_nav').fadeIn(100);
});
$(document).on('mouseout', '.work_examples_nav', function(){
$(this).css({textDecoration: 'none'}).delay(0).fadeOut(100);
});
$(document).on('mouseover', '.work_examples_nav', function() {
$(this).css({textDecoration: 'underline'}).fadeIn(100);
});
$(document).on('mouseout', '.work_examples_1_2', function() {
$('.work_examples_nav_2').fadeOut(0);
});
$(document).on('mouseover', '.work_examples_1_2', function() {
$('.work_examples_nav_2').fadeIn(100);
});
$(document).on('mouseout', '.work_examples_nav_2', function(){
$(this).css({textDecoration: 'none'}).delay(0).fadeOut(100);
});
$(document).on('mouseover', '.work_examples_nav_2', function() {
$(this).css({textDecoration: 'underline'}).fadeIn(100);
});
