@qwexort

Почему при наведении ссылка всплывает не там где указано?

У меня есть слайдер.Я хочу,что бы при наведении на одну из картинок слайда всплывала ссылка, которая будет находиться на той же картинке,на которую навелся.Но при наводе на другую картинку,ссылка всплывает на первой картинке.Вот код
<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);
});
  • Вопрос задан
  • 82 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы