Dopiero po najechaniu kursorem na obrazek - mają pojawiać się strzałki

Question

Witam.

Mam przesuwające się automatycznie obrazki jako pokaz slajdów.

Tu jest mój kod na CodePen:
https://codepen.io/Krzysiek_39/pen/poNLbgx

Chciałbym, aby dopiero po najechaniu kursorem na obrazek (jako "cursor: default") - pojawiła się strzałka po lewej i po prawej stronie. Gdy domyślny kursor jest po za obrazkiem, to te dwie strzałki mają być niewidoczne.

Tu jest idealny przykład jak to ma wyglądać:
https://www.jqueryscript.net/demo/Responsive-Infinite-jQuery-Carousel-Slider-Plugin-LoopSlider/

Czy wiecie jak to zrobić ?

Będę bardzo wdzięczny za skuteczną pomoc.

Answer 1

Strzałki mogą się pokazywać tylko wtedy kiedy kursor jest na obrazku - miej to na uwadze. Możesz tu wykorzystać :hover, aby zmieniać widoczność owych strzałek. 

Answer 2

Wejdź w devtools na stronie którą dałeś za przykład wybierz strzałką element który cię interesuje i zobaczysz technikę , właściwości jakiej użył webdeveloper...

W tym akurat przykładzie była to właściwość =>  fiil: transparent;

która po najechaniu :hover zmienia  się na fill: #fff;

Tutaj masz opis i fajne przykłady:

https://css-tricks.com/almanac/properties/f/fill/

Mając tę wiedzę możesz zastosować ją w swoim kodzie

Powodzenia

Comments

Później obadam na tamtej przykładowej stronie właściwość => fill: transparent; oraz zmianę na fill: #fff; po najechaniu :hover

---

@niezalogowany,

Z tym fill: transparent; nie mam pojęcia jak to zrobić, aby zadziałało.

Jedynie przy pomocy właściwości opacity zrobiłem to w taki sposób, że prawie działa jak należy.

Pomożesz?

---

fill działa w konkretnych przypadkach =>

https://css-tricks.com/almanac/properties/f/fill/

jeśli w Twoim kontekście  działa opacity  to nie widzę problemu Najważniejsze aby dotrzeć do celu ,dróg jest wiele jak i możliwości ...

---

Tu jest poprawiony kod na CodePen:
https://codepen.io/Krzysiek_39/pen/poNLbgx

Dodałem do CSS:

.slider_btn
{
    opacity: 0;
}

.slider:hover + .slider_objects .slider_btn
{
    opacity: 1;
}

.slider_btn:hover
{
    color: navy;
    opacity: 1;
}

Zauważ, że:

1. pojawiają się strzałki kiedy kursor jest na obrazku (jako "cursor: default")

2. gdy najadę kursorem na lewą strzałkę (jako "cursor: pointer"), to zmienia się kolor tej strzałki na granatowy (jako color: navy) oraz gdy najadę kursorem na prawą strzałkę (jako "cursor: pointer"), to zmienia się kolor tej strzałki na granatowy (jako color: navy)

3. gdy najadę kursorem na lewą strzałkę (kolor granatowy), to NIESTETY znika prawa strzałka oraz gdy najadę kursorem na prawą strzałkę (kolor granatowy), to NIESTETY znika lewa strzałka

Zatem punkt nr 3 nie działa prawidłowo

Czy wiesz jak zrobić, aby po najechaniu kursorem na lewą strzałkę - nie znikała prawa strzałka oraz po najechaniu kursorem na prawą strzałkę - nie znikała lewa strzałka ?

---

wrzuć cały kod. aa juz mam oczy zmęczone przepraszam

---

.slider_btn:hover
{
   z-index: -1;
    opacity: 1;
}

Dodaj z-index negatywny strzałka przestanie znikać ale koloru nie będzie

---

Właściwość z-index o ujemnej wartości jeszcze bardziej pogorszyła działanie tego efektu.

Czy potrafiłbyś to zrobić na podstawie właściwości fill: transparent ?

---

Przykro mi  z tego powodu.  Myślę że spokojnie tak Ale to Twoje wyzwanie więc nie odbiorę Ci tej przyjemności...podpowiem Ci tylko (jak już podopowiadałem wcześniej że  fill działa w określonym kontekście)  Wszystko jest wytłuszczone w linku który Ci wysłałem. dodam jeszcze jeden =>

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill

---

Teraz jest prawie idealnie.

Spójrz na mój poprawiony kod:
https://codepen.io/Krzysiek_39/pen/poNLbgx

Wykasowałem w CSS:

.prev_btn:before, .next_btn:before
{
    transform: translate(-27.5%, -20%);
}

Dzięki usunięciu transform: translate(-27.5%, -20%); te okrągłe kółka (lewy i prawy) są wyrównane - od lewej i prawej strony. Niestety dwie strzałki nie znajdują się w środku okrągłęgo kółka.

Jak zrobić, aby dwie strzałki były idealnie w środku okrągłego kółka (po lewej i po prawej) ?