[CSS/JavaScript] Div που εμφανίζεται ή εξαφανίζεται σαν tooltip + delay

[philos]

Προσπαθώ να φτιάξω το εξής σε html/css/javascript/jquery:

• ένα αντικείμενο Α (text ή εικόνα), το οποίο όταν γίνεται hover, ανοίγει/ εμφανίζεται δίπλα του ένα div Β με περιεχόμενα (όχι απαραίτητα tooltip καθώς είναι ένα div με κανονικά στοιχεία HTML / όχι μόνο text)
• όταν ο χρήστης μετακινεί τον κέρσορα εκτός του αντικειμένου Α, μετά από 300ms το div Β εξαφανίζεται, ενώ όσο ο κέρσορας είναι πάνω στο Α, το Β δεν εξαφανίζεται
• όταν ο χρήστης έχει τον κέρσορα μέσα στο div Β το div Β δεν εξαφανίζεται καθόλου. μόλις όμως ο κέρσορας βγει εκτός του div B, αυτό πρέπει να εξαφανιστεί μετά από 300ms.

Έχω κάνει άπειρες προσπάθειες με onmouseover/onmouseout/onmouseleave ++ setTimeout/ clearTimeout, αλλά όλο κάτι προκύπτει δεν δουλεύει σωστά.

 

Καμιά ιδέα σε jsfiddle κτλ;

[dominotrix]

Αυτο που περιγραφεις ειναι ακριβως ενα μενου. Τουλαχιστον για το πως λειτουργει (Το Β ειναι το υποτιθεμενο υπομενου). Δε χρειαζεσαι καν JS για να το κανεις αυτο, απλα CSS.

 

https://codepen.io/dominotrix/pen/zPppEg

[philos]

Thanks για την απάντηση dominotrix!

 

Φαίνεται να δουλεύει σωστά, όμως δεν έχει την παράμετρο των 300 milliseconds για το κλείσιμο.

 

Αυτό βασικά είναι που με δυσκολεύει και περισσότερο και χρησιμοποιούσα setTimeout. Μπορεί να γίνει αυτό με CSS;

[XPHSTOS_]

Αν κατάλαβα καλά θέλεις και το delay.
Στο παρακάτω link τα εξηγώ αναλυτικά.

Site: Animation with Delay


Αν σε μπερδεύει η σύνταξη του CSS, από το βελάκι που έχει στο κουτί του CSS επέλεξε το "View Compiled CSS"

[philos]

Χρήστο σε ευχαριστώ για το codepen που ετοίμασες, είναι πολύ καλό και επεξηγηματικό (αν και με πιο προχωρημένο CSS απ' αυτό που γνωρίζω)

Εγώ είχα φτιάξει ένα σωρό αλχημείες με onmouse events και δεν συμμαζεύεται, ενώ τα πράγματα είναι πιο εύκολα και με πολύ αποδοτικό τρόπο...

 

Λειτουργεί όπως θέλω, ωστόσο έχω μία διόρθωση: το Card B πρέπει να ανοίγει μόνο όταν κάνεις hover στο Card A και όχι όταν ο κέρσορας είναι πάνω στο Card B καθ' όσον είναι hidden. Απλά από τη στιγμή που θα κάνεις hover στο Card A και μετά μετακινήσεις (μέσα στα 300ms) τον κέρσορά σου μέσα στο πλέον εμφανές Card B, τότε είναι που το Card B δεν πρέπει να κρυφτεί.

Επεξ/σία 19 Νοεμβρίου 2017 από philos

[philos]

Πάντως και με z-index -1 και μετά πιο υψηλό value που δοκίμασα δεν δουλεύει όπως θα το ήθελα.

[Crypton-R-]

Απλά άλλαξε αυτό:

.cardB:hover
opacity 1
transform translateX(0)
transition-delay 0s, 0s

με αυτό:

.cardB:hover
cursor default

Δεν ξέρω αν είναι ο σωστός τρόπος, αλλά είναι ένας τρόπος...

[philos]

Hi Crypt! Thanks για το edit , αλλά και τώρα δεν λειτουργεί σωστά.

Το Card B πρέπει να ανοίγει μόνο όταν κάνεις hover στο Card A και όχι όταν ο κέρσορας είναι πάνω στο Card B καθ' όσον είναι hidden * (αν το Card B είναι visible λόγω του ότι κάναμε hover στο Card A και μέσα στα 300ms μετακινήσαμε τον κέρσορα στο card B (= καθόσον είναι visible), πρέπει να μένει visible το Card B μέχρι να ξανά βγάλουμε τον κέρσορα έξω (αυτό είναι που δεν δουλεύει σωστά στο edit που είπες).

 

* Πχ αν δεις στο codepen, αν πας τον κέρσορα πάνω από την τοποθεσία που κρύβεται το Card B, εντελώς εκτός του Card A δλδ, αυτό εμφανίζεται, που δεν πρέπει.

 

Δηλαδή το χρειάζομαι ακριβώς όπως το έγραψε ο Χρήστος με την παραπάνω διαφορά.

 

Είναι άραγε πολύπλοκο σε σημείο να μην επαρκούν οι δυνατότητες του CSS;
 
 

[Crypton-R-]

Η αλλαγή που σου είπα αυτό κάνει, το έκανες σωστά;

 

Δες το παρακάτω βίντεο να δεις το αποτέλεσμα:

 

[philos]

Ναι σωστά την έκανα την αλλαγή και βλέπω και το θέμα/ πρόβλημα που υπάρχει και στο βίντεο (στο 0:07 - 0:08 όταν μεταβαίνεις από το Card A στο Card B, το Card B θα έπρεπε να παραμένει visible όσο αφήνεις τον κέρσορα πάνω του (hover), καθώς έκανες τη μετάβαση μέσα στα 300ms, ενόσω δλδ ήταν visible).

 

Όταν είναι hidden, δεν θα πρέπει με το hover πάνω του (= σε κάτι που ουσιαστικά δεν βλέπει ο χρήστης στην οθόνη του, να γίνεται visible -> αυτό διορθώθηκε με την δική σου αλλαγή, όμως χάλασε αυτό που ανέφερα στο 0:07 - 0:08)

[alou]

Θα πρέπει να αλλάξεις τις διαστάσεις του αρχικού element ώστε να καταλάβει και τη διάσταση της εικόνας , πολύ πρόχειρα παίζοντας με το codepen του Χρήστου ένα παράδειγμα:

 

https://codepen.io/alou/pen/BmYWyQ?editors=1100

[philos]

Γεια σου alou

 

Σε τι ακριβώς βοηθάει να καταλάβω τη διάσταση της εικόνας; Στο codepen σου βλέπω ότι έβαλες dashed περίγραμμα ώστε να γίνεται αντιληπτή η διάσταση της εικόνας, αλλά δεν μπορώ να καταλάβω πως ακριβώς αυτό βοηθάει στο ζητούμενο αποτέλεσμα.

[alou]

Βοηθάει ώστε να μην εξαφανιστεί η δεξιά εικόνα όταν πας πάνως της αλλά να μην εμφανιστεί όταν κάνεις hover στο μέρος που θα εμφανιστεί η εικόνα που αρχικά είναι κρυμένη, αυτό κατάλαβα ότι ήταν το ζητούμενό σου...

 

Το περίγραμμα είναι για να καταλαβαίνεις την αλλαγή μόνο.

[philos]

Χμμ και πάλι δεν βγαίνει (είμαι σε Firefox), πχ με αρχική οθόνη:


.. όταν πάω τον κέρσορα (κόκκινο βέλος) εκεί, εμφανίζεται, ενώ δεν θα έπρεπε:


Ένα sum up είναι ότι ουσιαστικά χρειάζομαι ένα tooltip/html περιεχόμενο που εμφανίζεται όταν κάνεις hover ένα συγκεκριμένο αντικείμενο, αλλά και όταν βάζεις το ποντίκι μέσα στο tooltip εντός 300ms το tooltip δε πρέπει να κλείνει.

Από εκεί και ύστερα, όταν βρίσκεσαι εκτός του tooltip και εκτός του αντικειμένου, το tooltip πρέπει να εξαφανίζεται.

Απλά δίνω αυτά τα 300ms ώστε ο κέρσορας να έχει χρόνο να μεταβεί στο tooltip, αν το επιθυμεί ο χρήστης, καθώς το tooltip έχει μέσα κείμενο και links που ενδεχομένως θα θέλει να πατήσει.

 

Στις παραπάνω εικόνες που σας παρέθεσα, εφόσον το tooltip είναι hidden, δεν πρέπει να εμφανίζεται όταν κάνεις hover πάνω στον κενό του χώρο. Η εμφάνιση του Card B (tooltip) θα πρέπει να γίνεται:

- όταν κάνεις hover την Card A

- και από εκεί και ύστερα, εφόσον μετακινήσεις τον κέρσορα μέσα στο Card B εντός 300ms, όσο ο κέρσορας από εκεί και ύστερα είναι μέσα στο Card B δεν πρέπει να σβήνει. Αν πατήσεις έξω από τα Card A και Card B το Card B πρέπει να εξαφανίζεται πάλι εντός 300ms.

- Στην αρχική φάση που φαίνεται μόνο το Card A, δεν υπάρχει λόγος να φαίνεται το Card B όταν κάνεις hover στην τοποθεσία που βρίσκεται "υπογείως" ( ) κρυμμένο.

[Crypton-R-]

Βοηθάει ώστε να μην εξαφανιστεί η δεξιά εικόνα όταν πας πάνως της αλλά να μην εμφανιστεί όταν κάνεις hover στο μέρος που θα εμφανιστεί η εικόνα που αρχικά είναι κρυμένη, αυτό κατάλαβα ότι ήταν το ζητούμενό σου...

 

Το περίγραμμα είναι για να καταλαβαίνεις την αλλαγή μόνο.

Σωστός ο παίχτης! Το πείραξα λίγο αλλά πρόχειρα.

Το θέμα είναι ότι γίνεται με αυτόν τον τρόπο αυτό που θέλεις.

 

https://codepen.io/Crypton-R-/pen/aVqWXW