Κάνοντας το κείμενο να εμφανίζεται όταν περνάμε πάνω από το δέντρο στο CSS

# Ένας οδηγός βήμα προς βήμα στο CSS

Τι γίνεται αν έχουμε μια εικόνα (του σταθμού εργασίας μας ή οτιδήποτε άλλο) και θέλουμε να εμφανίζεται κάποιο συννεφάκι κειμένου όταν τοποθετούμε τον δείκτη του ποντικιού πάνω από μια επιλεγμένη ενότητα; Αντιμετώπισα αυτό ακριβώς το πρόβλημα κατά την ανακατασκευή του προσωπικού μου ιστότοπου χαρτοφυλακίου και βρήκα έναν απλό τρόπο για να το κάνω αυτό.

Για αυτό το άρθρο, θα χρησιμοποιήσουμε μια εικόνα που περιέχει 1 δέντρο ως παράδειγμά μας. Όταν τοποθετούμε το δείκτη του ποντικιού πάνω από το δέντρο, θέλουμε να εμφανίζεται το συννεφάκι κειμένου.

Μια επισκόπηση του πώς θα λειτουργήσει αυτό

• Πρώτα κάνουμε την εικόνα μας να εμφανίζεται στον κώδικα HTML μας
• Δημιουργούμε 3 πράσινα κουτιά — ένα καλύπτει τα φύλλα, ένα καλύπτει το στέλεχος και ένα καλύπτει τη γλάστρα
• Δημιουργούμε το συννεφάκι κειμένου μας, αλλά πρώτα το κάνουμε αόρατο
• Χρησιμοποιούμε το :hover στο CSS για να κάνουμε το συννεφάκι κειμένου μας ορατό όταν τοποθετούμε το δείκτη του ποντικιού πάνω σε κάποιο από τα πράσινα τετράγωνα
• (Προαιρετικά) αφαιρούμε το πράσινο φόντο των πράσινων τετραγώνων

Όλος ο κώδικας σε ένα μέρος

<div>
    <div class="img-container">
        <img src="./tree.jpg" alt="tree">
        <div class="box box1"></div>
        <div class="box box2"></div>
        <div class="box box3"></div>
        <div id="tooltip">
            <h1>This appears when you hover over the tree</h1>
        </div>
    </div>

</div>

<style>
.img-container {display:table; position:relative; margin:4em}
.box {position: absolute; background-color:rgb(0,255,0,0.5)}
.box1 {height:40%; width:33%; top:7%; left:17%}
.box2 {height:33%; width:4%; top:47%; left:33%}
.box3 {height:18%; width:14%; top:80%; left:28%}

#tooltip {position:absolute; background-color:white; 
            top:30%; left:55%; right: 2%; 
            padding:1.5em; border:2px solid limegreen; display:none}
.box1:hover ~ #tooltip {display:block}
.box2:hover ~ #tooltip {display:block}
.box3:hover ~ #tooltip {display:block}
</style>

Κάποια εξήγηση

Το τμήμα HTML

<div>
    <div class="img-container">            // contains the image
        <img src="./tree.jpg" alt="tree">  // the image
        <div class="box box1"></div>       // 1st green box
        <div class="box box2"></div>       // 2nd green box
        <div class="box box3"></div>       // 3rd green box
        <div id="tooltip">                 // our text bubble
            <h1>This appears when you hover over the tree</h1>
        </div>
    </div>

</div>

Εδώ, χρειαζόμαστε ένα div για να περιέχει την εικόνα μας, καθώς η εικόνα μας δεν μπορεί να περιέχει θυγατρικά στοιχεία. Αργότερα, θα χρησιμοποιήσουμε CSS για να κάνουμε αυτό το img-container ίδιο μέγεθος με την εικόνα μας.

Αυτό γίνεται για να μπορούμε να τοποθετήσουμε όλα τα άλλα (τα 3 πλαίσια και το πλαίσιο κειμένου) σωστά μέσα σε αυτό το img-container. Προς το παρόν (χωρίς CSS), αυτά τα θυγατρικά στοιχεία θα εμφανίζονται κάθετα το ένα μετά το άλλο. Αλλά τα πράγματα θα αλλάξουν αφού προσθέσουμε λίγο CSS.

.img-container — το div που περιέχει τα πάντα

.img-container {
display:table;    
position:relative;
margin:4em
}

• Το display:table το αναγκάζει να μοιράζεται το ίδιο μέγεθος με την εικόνα. Που μας επιτρέπει να τοποθετήσουμε όλα τα άλλα μέσα αργότερα.
• Το position:relative το κάνει έτσι ώστε οποιοδήποτε θυγατρικό στοιχείο μέσα του με position:absolute θα ακολουθεί το img-container
• Το margin:4em απλώς προσθέτει ένα μικρό περιθώριο γύρω από το δοχείο

Τα κουτιά

.box {position: absolute; background-color:rgb(0,255,0,0.5)}
.box1 {height:40%; width:33%; top:7%; left:17%}
.box2 {height:33%; width:4%; top:47%; left:33%}
.box3 {height:18%; width:14%; top:80%; left:28%}

• position:absolute σημαίνει ότι τα κουτιά δεν στοιβάζονται πλέον κάθετα το ένα μετά το άλλο. Αντίθετα, θα είναι θέση σε σχέση με img-container — μπορούμε να χρησιμοποιήσουμε ποσοστά για να προσδιορίσουμε πού στο img-container θα τοποθετηθούν.
• background-color:rgb(0,255,0,0.5) σημαίνει απλώς ένα πράσινο πίσω έδαφος με 50% αδιαφάνεια (κάπως διαφανές ώστε να μπορούμε ακόμα να βλέπουμε το δέντρο)

Εδώ, τα height width top και left είναι όλα σε ποσοστά

• Το height αναφέρεται στο ύψος του κουτιού. 40% σημαίνει ότι το πράσινο πλαίσιο έχει ύψος ίσο με το 40% του ύψους του img-container
• Το width αναφέρεται στο πλάτος του κουτιού. 33% σημαίνει ότι το πράσινο πλαίσιο έχει πλάτος ίσο με το 33% του πλάτους του img-container
• Το top αναφέρεται στην απόσταση από την κορυφή του img-container. Το 7% σημαίνει ότι το πράσινο κουτί μας απέχει 7% από την κορυφή του img-container — 7% του ύψους του img-container.
• Το left αναφέρεται στην απόσταση από τα αριστερά του img-container. Το 17% σημαίνει ότι το πράσινο κουτί μας είναι 17% (πλάτος img-container) από το αριστερό μέρος του img-container

Τα height width top και left χρησιμοποιούνται όλα για την τοποθέτηση των πράσινων πλαισίων και την ευθυγράμμισή τους με το δέντρο της εικόνας.

Η συμβουλή εργαλείου (φούσκα κειμένου)

#tooltip {
position:absolute;
background-color:white; 
top:30%;
left:55%;
right: 2%; 
padding:1.5em;
border:2px solid limegreen;
display:none
}

• Τα position:absolute και τα top left και right χρησιμοποιούνται για την τοποθέτηση της φυσαλίδας κειμένου.
• Οι background-color:white padding:1.5em και border:2px solid limegreen διαμορφώνουν λίγο το συννεφάκι κειμένου
• Το display:none το κάνει αόρατο στην αρχή

Μην ανησυχείτε μήπως το πλαίσιο κειμένου μας είναι αόρατο. Θα το κάνουμε ορατό όταν τοποθετείτε το δείκτη του ποντικιού χρησιμοποιώντας CSS στο επόμενο μέρος.

Το μέρος :hover

.box1:hover ~ #tooltip {display:block}
.box2:hover ~ #tooltip {display:block}
.box3:hover ~ #tooltip {display:block}

Εάν τοποθετήσουμε το ποντίκι μας είτε στο box1 box2 είτε στο box3, η οθόνη του #tooltip θα ρυθμιστεί σε «μπλοκάρισμα» — πράγμα που σημαίνει απλώς ότι θα γίνει ορατή.

Εδώ, παρατηρήστε ότι έχουμε έναν χαρακτήρα ~ μεταξύ .box1:hover και #tooltip (μαζί με το πλαίσιο2 και το πλαίσιο3). Αυτό συμβαίνει επειδή στην HTML, η επεξήγηση εργαλείου και τα πλαίσια είναι αδελφικά στοιχεία — βρίσκονται το ένα δίπλα στο άλλο και ανήκουν στο ίδιο γονικό στοιχείο img-container.

συμπέρασμα

Τώρα που ο μηχανισμός αιώρησης έχει τελειώσει, μπορούμε να προχωρήσουμε και να αφαιρέσουμε το διαφανές πράσινο φόντο από τα 3 κουτιά μας. Μπορούμε να τοποθετήσουμε τον δείκτη του ποντικιού πάνω από το δέντρο (το μεγαλύτερο μέρος του δέντρου) και η επεξήγηση εργαλείου θα εξακολουθεί να εμφανίζεται.

Ελπίζω ότι αυτό ήταν σαφές και ενημερωτικό!

Μερικές τελευταίες λέξεις

Εάν αυτή η ιστορία προσέφερε αξία και θέλετε να δείξετε λίγη υποστήριξη, θα μπορούσατε:

1. Χτυπήστε παλαμάκια 50 φορές για αυτήν την ιστορία (αυτό με βοηθάει πραγματικά)
2. Εγγραφείτε για μια συνδρομή Medium χρησιμοποιώντας το "my link" (5$/μήνα για ανάγνωση απεριόριστων ιστοριών Medium)

Ρύθμιση του My Home Office: https://zlliu.co/workspace

Τα δωρεάν ηλεκτρονικά βιβλία μου: https://zlliu.co/books

Το LinkedIn μου: https://www.linkedin.com/in/zlliu/

Κωδικοποίηση Level Up

Ευχαριστούμε που είστε μέλος της κοινότητάς μας! Πριν φύγεις:

• 👏 Χτυπήστε για την ιστορία και ακολουθήστε τον συγγραφέα 👉
• 📰 Δείτε περισσότερο περιεχόμενο στη δημοσίευση Κωδικοποίησης Level Up
• 💰 Δωρεάν μάθημα συνέντευξης κωδικοποίησης ⇒ Προβολή μαθήματος
• 🔔 Ακολουθήστε μας: Twitter | LinkedIn | "Ενημερωτικό δελτίο"

🚀👉 Εγγραφείτε στην ομάδα ταλέντων Level Up και βρείτε μια καταπληκτική δουλειά