CSS - Δημιουργία αναδυόμενου παραθύρου (χωρίς JavaScript)

Δείτε πώς μπορείτε να δημιουργήσετε ένα αναδυόμενο παράθυρο στο CSS, χωρίς να χρησιμοποιήσετε JavaScript

Χρήση : Τοποθετήστε το δείκτη του ποντικιού για να μετακινήσετε το CSS όταν μετακινείτε τον κέρσορα.

Μεταξύ των τροποποιημένων χαρακτηριστικών CSS, χρησιμοποιήστε την οθόνη: κανένα για να αποκρύψετε / δείξετε το αναδυόμενο παράθυρο, ανάλογα με τη θέση του δρομέα.

Ένα αναδυόμενο παράθυρο με μια σύνδεση

Το περιεχόμενο του αναδυόμενου παραθύρου τοποθετείται σε ένα ετικέτα μέσα στο ετικέτα

Εδώ είναι ο κώδικας CSS για να προσθέσετε το αρχείο html ή σε ξεχωριστό αρχείο CSS:

 a.info {θέση: συγγενής; z-δείκτης: 24; χρώμα φόντου: #ddd; χρώμα: # 000; κείμενο-διακόσμηση: κανένα} a.info:hover {z-index: 25; χρώμα φόντου: # ff0} a.info span {εμφάνιση: κανένας} a.info:hover span {εμφάνιση: μπλοκ; θέση: απόλυτη; κορυφή: 2em; αριστερά: 2em; πλάτος: 10em; σύνορα: 1px solid # 0cf; φόντο-χρώμα: # 555; χρώμα: #fff; }} 

Ο κώδικας HTML που θα εισαχθεί στην ιστοσελίδα σας:

 Το Voice un lien vers 

Τα αποτελέσματα:

Χωρίς δρομέα:

Με το δρομέα:

Ένα αναδυόμενο παράθυρο χωρίς σύνδεση

Εάν θέλετε απλώς να δημιουργήσετε ένα αναδυόμενο παράθυρο χωρίς σύνδεση, μπορείτε να βάλετε href = "#" στην ετικέτα σας, αλλά ορισμένα προγράμματα περιήγησης θεωρούν ότι το "#" είναι ένας σύνδεσμος προς την κορυφή της σελίδας.

Για να αντιμετωπίσετε αυτό, αντικαταστήστε την ετικέτα με μια ετικέτα (σε HTML και CSS).

span.info

 {θέση: σχετική. z-δείκτης: 24; χρώμα φόντου: #ddd; χρώμα: # 000; δρομέας: δείκτης; }}