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

Question

[Bogdan Buchko]

Есть такой код:

$(".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;
}

Comments

[Anonymous Penguin]

Не используй jQuery

[Bogdan Buchko]

Anonymous Penguin, можно тогда идентичное на js

[Владислав Лысков]

Anonymous Penguin, отличный ответ, а главное точный ответ на вопрос

Answer 1

[ThunderCat]

Но при наведении первый элемент скрывается, но второй не появляется. В чем проблема, можете объяснить

Где цсс, где разметка? Подозреваю что разметка рассчитана на более стандартные hide/show, а не на смену прозрачности (что само по себе дурацкое решение)...

PS: Все работает, хотя конечно в идеале надо бы обернуть в документ реди...
https://jsfiddle.net/1zkaexu0/

Comments

[Bogdan Buchko]

ThunderCat добавил...

[ThunderCat]

Bogdan Buchko что в консоли, какие ошибки?

[Bogdan Buchko]

ThunderCat, какие ошибки ти видел код?

[ThunderCat]

Bogdan Buchko, В итоге - все работает (что в прочем не удивительно).

[ThunderCat]

Bogdan Buchko,

какие ошибки ти видел код?

да, видел, и даже запустил. И все работает. Значит либо не загрузились ресурсы, либо косяк в другой части кода/разметки. Соответственно либо должны быть ошибки, либо ты что-то не так делаешь.

Answer 2

[Сергей Бобылев]

Почему бы не использовать CSS ?

.block{
display:none;
}
.block:hover{
display:block;
}

Если надо чтобы например первый блок был открыт,то добавить

.block:first-child{
display:block;
}