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

[philos]

Thanks παιδιά! Έκανα κι εγώ κάποιες αλλαγές στα padding/width στο τελευταίο που έστειλες Crypto, και βγήκε αυτό (ο θεός να το κάνει ).

Θα το δοκιμάσω στην κανονική εφαρμογή που το θέλω και θα σας πω.

[philos]

Λοιπόν παιδιά, σας παραθέτω την εφαρμογή σε ποιο πραγματικές συνθήκες.

 

Επέλεξα από το source code (μιας που είναι σε localhost) και ανέβασα αυτό το codepen.

 

Το πρόβλημα είναι ότι το resize κατά το hover, χαλάει και το υπόλοιπο layout. Λαμβάνοντας υπόψιν το πως δουλεύει στο παραπάνω codepen, το σωστό θα ήταν:

Όταν πρωτοφορτώνει η σελίδα:

[ΣΩΣΤΟ] όταν κάνεις hover στο avatar:

[ΛΑΘΟΣ] που γίνεται όταν κάνουμε hover:

Όπως καταλαβαίνεται είναι ένας forum postbit σχεδιασμός (θα υπάρχει και το username κτλ) και απλά θέλουμε όταν ο visitor κάνει hover στο avatar, να εμφανίζονται κάποια στοιχεία. Μέσα στο μαύρο box όμως θα μπουν και σύνδεσμοι, οπότε θα πρέπει ο χρήστης να μπορεί να πατάει τους συνδέσμους αυτούς / δλδ να μην είναι ένα tooltip που εξαφανίζεται άμεσα όταν ο κέρσορας φεύγει από το avatar/hover.

 

Ουσιαστικά θέλουμε να δουλέψει όπως στο πρωτότυπο codepen που συζητούσαμε, απλά το μαύρο κουτί/CardB να εμφανίζεται από πάνω και να μην χαλάει το layout.

 

Ξέρω σας ζάλισα, θα έπρεπε εξ αρχής να βάλω ένα παράδειγμα live συνθηκών, αλλά ας δουλέψουμε σε αυτό, αν θέλετε και έχετε χρόνο. 

[dominotrix]

Βλεπω στο codepen τον html κωδικα και εχεις λαθακια. Οχι γραμματικα αλλα κυριως συντακτικα. πχ εχεις βαλει χυμα το user title Και τα 2 img's οπως επισης χρησιμοποιεις <table> για να φτιαξεις το layout του CardB ενω εχουμε 2018 σχεδον και υπαρχει το flex / grid

 

Περα απο αυτο, για να πετυχεις αυτο που θελεις θα πρεπει απλα το cardA και cardB να ειναι μονο 2 divs μεσα σε ενα ενιαιο το οποιο θα εχει position:relative ενω το cardB Μονο θα εχει position:absolute για να μη σπαει το layout. Ισως σε ενα τριτο div Να πεταξεις μεσα τα user title και τα 2 img's.

 

Γενικα πρεπει πρωτα να ξεκαθαρισεις την δομη και μετα την εμφανιση. Ειναι λιγο ανακατα το markup. 

Αν βρω χρονο θα το στρωσω σε ενα αλλο codepen.

[philos]

χαχα ναι, γενικά χρησιμοποιώ divs αλλά όταν έρχεται η ώρα να βάλω πληροφορίες σε πίνακα rows/columns βάζω tables, κατάλοιπο από παλιά.

 

Απλά θέλω ο κώδικας να είναι συμβατός, τουλάχιστον με IE 10 και άνω.

 

Δοκίμασα αυτά που είπες (αν τα κατάλαβα σωστά), αλλά και πάλι το αποτέλεσμα δεν ήταν το επιθυμητό (τα εικονίδια και το user title μετακινήθηκαν προς τα πάνω, ενώ το hover στο black box/Card B δεν το κράταγε visible).

 

Ναι αν βρεις χρόνο ρίξε μια ματιά.

[dominotrix]

Οταν κανεις χοβερ στο Α θελεις να κρυβονται τα user title και 2 img's ??

[philos]

Βασικά απλά το black box θα πρέπει να εμφανίζεται από πάνω τους / κοντά στο avatar, οπότε πρακτικά κρύβονται, όχι ότι πρέπει να υπάρχει ειδική πρόβλεψη να κρυφτούν.

 

Όλο το postbit πρέπει να έχει τη μορφή που έχει και απλά το black box/ CardB στις δοκιμές μας, θα εμφανίζεται ως tooltip:

[dominotrix]

Εκανα αυτο:

 

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

 

Αλλα πρεπει να κανεις hover σε ολο το div. Αν ειναι λαθος πες μου να το αλλαξω. Το εκανα ετσι γιατι ειπες οτι αν ο χρηστης θελει να κανει hover στο cardB για να πατησει λινκς να μην κρυφτει. Ο μονος τροπος ειναι αν το cardB ειναι μεσα σε ενα div το οποιο ο χρηστης κανει Hover. Ετσι στην ουσια το hover δεν ειναι ουτε στο cardA ουτε στο cardB αλλα στο #main το οποιο περιεχει και τα 2 μεσα. Ετσι, παντα θα ειναι triggered.

[philos]

Thanks που ασχολήθηκες!

 

Το CardB πρέπει να εμφανίζεται μόνο όταν γίνεται hover το avatar/card A ++ μετά να μενει ανοιχτό αν ο κέρσορας μπει στο ήδη ανοιχτό CardB.

 

Πρέπει να σημειώσω ότι το postbit δίπλα στα εικονιδιάκια και στο usertitle έχει κι άλλα tooltips και στοιχεία,(links κτλ) συνεπώς στη φάση του παραπάνω codepen, που εμφανίζεται το CardB με hover σε όλο το postbit, αυτά τα στοιχεία δεν θα είναι προσβάσιμα. Μόνο το avatar θα πρέπει να ανοίγει την CardB.

[dominotrix]

Προσεξε να δεις τι γινεται σε ολα τα πιθανα σεναρια:

 

hover to A -> shows B

mouseOut of A -> hides B

 

Αρα το Β ειναι κρυμμενο και δεν μπορει να εμφανιστει ποτε. Μια λυση ειναι να βαλουμε .cardB:hover -> opacity:1;

 

Ετσι συνεχιζουμε απο πιο πανω:

 

mouseOut of A -> mouse hovers on B (ειναι ακομα ανοιχτο γιατι φανταζομαι θα βαλεις ενα delay στο animation .5s για να προλλαβει ο χρηστης να μετακινησει το ποντικι, αν και αυτη τη στιγμη δε χρειαζεται μιας και ειναι πολυ κοντα το Α με το Β ) -> shows B

 

Ετσι πετυχενεις το σκοπο σου αλλα με μια παρενεργεια: Αν κανεις hover ΑΠΕΥΘΕΙΑΣ στο Β παρολο που ειναι κρυμμενο θα εμφανιστει. Και αυτο γιατι πιο πανω δηλωσαμε .cardB:hover -> opacity:1;

 

Με λιγα λογια, δεν γινεται να κανεις hover σε κατι και να σου εμφανισει το Β και μετα αφου μετακινησεις το ποντικι εξω απο το Α να παραμεινει ανοιχτο το Β, αφου το rule που του δηλωνεις ειναι hover to A.

 

Εφοσον το hover στο A πλεον δεν ισχυει (με τον κερσορα εξω απο αυτο) τοτε κανονικα πρεπει να κρυφτει.

 

Ακομα και με JS να το κανεις αυτο δε ξερω αν θα τα καταφερεις. Το γενικο σου rule ειναι hover to A shows B. Οταν πας το ποντικι μετα πανω στο Β τοτε το rule: "hover to A" παυει να ισχυει. Μονο αν τα βαλεις τελειως κολλητα το Α με το Β και γινει κατι σαν menu θεωρητικα μπορει να δουλεψει.

[philos]

Ναι, αυτό ακριβώς που περιγράφεις θέλω να πετύχω (και εξου και τα 300ms delay/ 0.5s delay που ανέφερες).

 

Δηλαδή δεν είναι εφικτό ε; Κρίμα!

 

Περίμενα ότι τουλάχιστον με JavaScript/jQuery θα μπορούσε να γίνει.

 

Πάντως σε αυτό το codepen (κάτι έπαθε ο firefox και μου το ανοίγει με infinite reload / μπήκα από Chrome για να το ξανά δω) που προαναφέρθηκε, συμβαίνει αυτό που θέλω, απλά κατά την εφαρμογή στο δικό μου (τουλάχιστον όπως κατάφερα να το μεταφέρω) εδώ, χαλάει / μετακινεί τα υπόλοιπα αντικείμενα. Αν μπορούσε να εφαρμοστεί αυτό χωρίς να χαλάει τα position των γύρω αντικειμένων, θα ήταν ok λογικά.

[dominotrix]

Εκανα μια αλλαγη στο δικο σου:

 

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

 

Αλλα και παλι οταν πας το ποντικι στο Β δεν παραμενει ανοιχτο.

 

Για δες και αυτο:

 

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

 

Αλλα πρεπει να πας γρηγορα το ποντικι δεξια! Δε το δοκιμασα με delay θα το δω και το βραδακι οταν σχολασω.

[Crypton-R-]

Ναι, αυτό ακριβώς που περιγράφεις θέλω να πετύχω (και εξου και τα 300ms delay/ 0.5s delay που ανέφερες).

 

Δηλαδή δεν είναι εφικτό ε; Κρίμα!

 

Περίμενα ότι τουλάχιστον με JavaScript/jQuery θα μπορούσε να γίνει.

 

Πάντως σε αυτό το codepen (κάτι έπαθε ο firefox και μου το ανοίγει με infinite reload / μπήκα από Chrome για να το ξανά δω) που προαναφέρθηκε, συμβαίνει αυτό που θέλω, απλά κατά την εφαρμογή στο δικό μου (τουλάχιστον όπως κατάφερα να το μεταφέρω) εδώ, χαλάει / μετακινεί τα υπόλοιπα αντικείμενα. Αν μπορούσε να εφαρμοστεί αυτό χωρίς να χαλάει τα position των γύρω αντικειμένων, θα ήταν ok λογικά.

Για δες αυτό:

 

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

[dominotrix]

Οοο δουλευει αψογα!

 

display: inline-block;

 

Για καποιο λογο αυτο εκανε την διαφορα. Αν δε το βαλεις τοτε το hover στο Β απο μονο του εμφανιζεται.. Παραξενο (?)

 

Και το z-index: -5; αποτι βλεπω ειναι σημαντικο.

 

 

.hoveraction:hover {

  width: 298px;

  height: 105px;

}

 

Εδω το μεγαλωνεις ετσι ωστε να παραμενει ανοιχτο το Β.

[Crypton-R-]

Σωστά! Μας βγήκε η πίστη από χθες αλλά νομίζω τα καταφέραμε...

Σπαζοκεφαλιά μας έβαλε ο philos μας

[philos]

χεχε, ναι, το τελικό codepen σου Crypton ήταν το ζητούμενο!

 

Αλλά θα σας ταλαιπωρήσω κι άλλο! Αυτή η εφαρμογή θα μπει σε ένα vBulletin Forum, όμως η μηχανή φορτώνει του κόσμου τον κώδικα /CSS και αφού εφάρμοσα όπως μπόρεσα το codepen, μάλλον κάτι κάνει conflict και δεν λειτουργεί σωστά.

 

Εδώ έχω ανεβάσει τη σελίδα από το localhost (έχω βάλει το 1px dashed για καθαρά debuggin λόγους).

 

Για κάποιο λόγο το CardC δεν εμφανίζεται, παρα μόνο αν του αφαιρέσω το z-index -10 κτλ, αλλά και πάλι το tooltip δεν λειτουργεί. Έχω κάνει 10δες δοκιμές CSS αλλαγών μέσω της κονσόλας.

 

Η σελίδα πριν την εφαρμογή αυτή, φαινόταν και πρέπει να φαίνεται έτσι.

Όταν κάποιος κάνει hover στο avatar, θα πρέπει να συμβαίνουν όλα όσα γίνονται και στο codepen, δλδ αυτό.

 

Τα πράσινα εμβλήματα έχουν κι αυτά tooltips (με άλλη λογική), αλλά δε νομίζω να επηρεάζουν τη συνολική εφαρμογή.

 

Για να μην πάει και χαμένος ο κόπος μας, αν κάποιος βρει χρόνο ας ρίξει μια ματιά με την κονσόλα του να μας πει. Μου έχει φάει άπειρο χρόνο το συγκεκριμένο θέμα.