Pokaż div na zawisie w tej samej pozycji

Próbuję pokazać div na mouseover, ale to migotanie, jak pokazać/ukryć bez szarpnięcia i gładka z przejścia?Pokaż div na zawisie w tej samej pozycji

Próbowałem wejścia/wyjścia za pomocą jquery, ale nadal miga.

Oto kod

body { 
 
\t margin: 0; 
 
} 
 
.row { 
 
\t float: left; 
 
\t width: 100%; 
 
} 
 
.col { 
 
\t float: left; 
 
\t width: 25%; 
 
\t position: relative; 
 
\t margin: 0 10px 0 0; 
 
} 
 
.front { 
 
\t width: 100%; 
 
\t height: 300px; 
 
\t background-color: #999 
 
} 
 
.back { 
 
\t position: absolute; 
 
\t left: 0; 
 
\t top: 0; 
 
\t height: 300px; 
 
\t opacity: 0; 
 
\t visibility: hidden; 
 
\t background-color: #ff0; 
 
\t z-index: 2; 
 
\t width: 100%; 
 
} 
 
.front:hover + .back { 
 
\t opacity: 1; 
 
\t visibility: visible; 
 
}

<div class="row"> 
 
    <div class="col"> 
 
    <div class="front">This is front div</div> 
 
    <div class="back">This is back div</div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="front">This is front div</div> 
 
    <div class="back">This is back div</div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="front">This is front div</div> 
 
    <div class="back">This is back div</div> 
 
    </div> 
 
</div>

Źródło

2017-09-04 Sanjeev Kumar

Twój problem jest, że jeśli div z powrotem pokazuje się, jesteś już unosi się nad przednim div, więc znika, więc jesteś najechaniu przedniej div ponownie, więc ponownie pojawia się back div - etc ad nauseum. Gdybym był tobą, wybrałbym metodę 'mouseenter' /' mouseleave' używając JS lub JQuery – Tijmen

@Tijmen Myślałem, że JavaScript będzie również potrzebny, dopóki nie zobaczyłem odpowiedzi poniżej – Script47

@ Script47 Tak, nawet nie brałem pod uwagę tylko rozwiązanie CSS, które prawdopodobnie jest lepsze. – Tijmen

migocze ponieważ za każdym razem .back staje się widoczna, najedź na .front nie jest już ważna. W celu rozwiązania tego można ustawić widoczność .Tylna jak widoczny na .back:hover które można zrobić za pomocą tego samego stylu css dla .back:hover jak .front:hover + .back

body { 
 
\t margin: 0; 
 
} 
 
.row { 
 
\t float: left; 
 
\t width: 100%; 
 
} 
 
.col { 
 
\t float: left; 
 
\t width: 25%; 
 
\t position: relative; 
 
\t margin: 0 10px 0 0; 
 
} 
 
.front { 
 
\t width: 100%; 
 
\t height: 300px; 
 
\t background-color: #999 
 
} 
 
.back { 
 
\t position: absolute; 
 
\t left: 0; 
 
\t top: 0; 
 
\t height: 300px; 
 
\t opacity: 0; 
 
\t visibility: hidden; 
 
\t background-color: #ff0; 
 
\t z-index: 2; 
 
\t width: 100%; 
 
} 
 
.front:hover + .back, 
 
.back:hover { 
 
\t opacity: 1; 
 
\t visibility: visible; 
 
}

<div class="row"> 
 
    <div class="col"> 
 
    <div class="front">This is front div</div> 
 
    <div class="back">This is back div</div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="front">This is front div</div> 
 
    <div class="back">This is back div</div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="front">This is front div</div> 
 
    <div class="back">This is back div</div> 
 
    </div> 
 
</div>

Źródło

2017-09-04 15:10:01 Dij

Co jeśli umieścić wewnątrz elementu .back Element .col, przenieś elementy stylu .front do elementu .col i dodaj element transition do .col? Myślę, że jest to lepsze rozwiązanie ze względu na obsługę przeglądarek.

body { 
 
    margin: 0; 
 
} 
 
.row { 
 
    float: left; 
 
    width: 100%; 
 
} 
 
.col { 
 
    float: left; 
 
    width: 25%; 
 
    position: relative; 
 
    margin: 0 10px 0 0; 
 
    height: 300px; 
 
    background-color: #999 
 
} 
 
.back { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    height: 300px; 
 
    opacity: 0; 
 
    visibility: hidden; 
 
    background-color: #ff0; 
 
    z-index: 2; 
 
    width: 100%; 
 
    transition: all 0.2s; 
 
} 
 
.col:hover .back { 
 
    opacity: 1; 
 
    visibility: visible; 
 
}

<div class="row"> 
 
    <div class="col"> 
 
    This is front part 
 
    <div class="back">This is back part</div> 
 
    </div> 
 
    <div class="col"> 
 
    This is front part 
 
    <div class="back">This is back part</div> 
 
    </div> 
 
    <div class="col"> 
 
    This is front part 
 
    <div class="back">This is back part</div> 
 
    </div> 
 
</div>

Źródło

2017-09-04 15:10:10

Umieszczenie 'z powrotem' wewnątrz' przodu' ma złą semantykę. – Bergi

@Bergi, ale dlaczego? –

Ponieważ jedna jest przednią częścią kolumny, a druga jest tylną ścianą kolumny. Tył nie jest częścią frontu. – Bergi

body { 
 
\t margin: 0; 
 
} 
 
.row { 
 
\t float: left; 
 
\t width: 100%; 
 
} 
 
.col { 
 
\t float: left; 
 
\t width: 25%; 
 
\t position: relative; 
 
\t margin: 0 10px 0 0; 
 
} 
 
.front { 
 
\t width: 100%; 
 
\t height: 300px; 
 
\t background-color: #999 
 
} 
 
.back { 
 
\t position: absolute; 
 
\t left: 0; 
 
\t top: 0; 
 
\t height: 300px; 
 
\t opacity: 0; 
 
\t visibility: hidden; 
 
\t background-color: #ff0; 
 
\t z-index: 2; 
 
\t width: 100%; 
 
} 
 
.col:hover > .back { 
 
\t opacity: 1; 
 
\t visibility: visible; 
 
}

<div class="row"> 
 
    <div class="col"> 
 
    <div class="front">This is front div</div> 
 
    <div class="back">This is back div</div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="front">This is front div</div> 
 
    <div class="back">This is back div</div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="front">This is front div</div> 
 
    <div class="back">This is back div</div> 
 
    </div> 
 
</div>

.col:hover > .back { 
    opacity: 1; 
    visibility: visible; 
}

Mam proste rozwiązanie.

Zmiana .front:hover + .back =>.col:hover > .back.

Źródło

2017-09-04 15:10:31 zynkn

Problemem jest to, że po najechaniu .front div pojawia się .Tylna div , więc teraz ty unosić się .Tylna div a nie .front więc znika i pętla trwa. Aby to naprawić, dodaj także efekt hover do .back div. Dodaj transition do . Powrót dla gładkiego efektu.

body { \t margin: 0; } .row { \t float: left; \t width: 100%; } .col { \t float: left; \t width: 25%; \t position: relative; \t margin: 0 10px 0 0; } .front { \t width: 100%; \t height: 300px; \t background-color: #999 } .back { \t position: absolute; \t left: 0; \t top: 0; \t height: 300px; \t opacity: 0; \t visibility: hidden; \t background-color: #ff0; \t z-index: 2; \t width: 100%; transition: 0.2s ease; } .front:hover + .back, .back:hover { \t opacity: 1; \t visibility: visible; }

<div class="row"> <div class="col"> <div class="front">This is front div</div> <div class="back">This is back div</div> </div> <div class="col"> <div class="front">This is front div</div> <div class="back">This is back div</div> </div> <div class="col"> <div class="front">This is front div</div> <div class="back">This is back div</div> </div> </div>

Źródło

2017-09-04 15:14:08 FrydrykChopin

Głównym problemem jest to, że nie byli w stanie powiedzieć, kto naprawdę „pędy” do „animacja”. Zarówno front jak i back są na tym samym poziomie, więc nie można tego zrobić z tego poziomu, ale jeśli zrobisz to za pomocą elementu nadrzędnego, to powinno działać.

Podejście będzie w następujący sposób:

.col:hover .back { 
    opacity: 1; 
    visibility: visible; 
}

Źródło

2017-09-04 15:15:19

Pokaż div na zawisie w tej samej pozycji

Odpowiedz

Powiązane problemy