INDMops
@INDMops
Парень с небольшой историей...

Как реализовать условие?

Есть такой код:
$(".one").hover(function() {
    if ($(".two").css("opacity") == 0) {
      $(".two").css("opacity", 1);
      $(".one").css("opacity", 0);
    } else {
      $(".one").css("opacity", 1);
      $(".two").css("opacity", 0);
    };
  });

Он должен при наведении скрывать тот элемент на который сейчас навели, и показывать тот элемент, что спрятан(opacity: 0), Но при наведении первый элемент скрывается, но второй не появляется. В чем проблема, можете объяснить

html:
<div class="gallery">
        <div class="small-stretch">
            <a href="page.html"><img class="one" src="image1.jpg" alt=""><img class="two" src="image2.png" alt=""></a>
        </div>
        ...
    </div>

css:
.gallery {
    padding: 10px;
    max-width: 80%;
    margin: 0 auto;
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-auto-rows: 300px;
    grid-auto-flow: row;
    transition: all .5s;
}

.gallery div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    transition: all .3s;
}

.gallery div {
    position: relative;
}

.two {
    opacity: 0;
}

.small-stretch {
    grid-column: span 2;
}
  • Вопрос задан
  • 84 просмотра
Пригласить эксперта
Ответы на вопрос 2
ThunderCat
@ThunderCat Куратор тега JavaScript
{PHP, MySql, HTML, JS, CSS} developer
Но при наведении первый элемент скрывается, но второй не появляется. В чем проблема, можете объяснить
Где цсс, где разметка? Подозреваю что разметка рассчитана на более стандартные hide/show, а не на смену прозрачности (что само по себе дурацкое решение)...

PS: Все работает, хотя конечно в идеале надо бы обернуть в документ реди...
https://jsfiddle.net/1zkaexu0/
Ответ написан
KKOOLL
@KKOOLL
full stack-developer
Почему бы не использовать CSS ?
.block{
display:none;
}
.block:hover{
display:block;
}

Если надо чтобы например первый блок был открыт,то добавить
.block:first-child{
display:block;
}
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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