CSS Αλλαγή των ιδιοτήτων ενός στοιχείου όταν αιωρείται ο δρομέας στο άλλο. Ψευδοκολάκια

Στις επόμενες παραγράφους, θέλω να εξετάσω λεπτομερέστερα τον επιλογέα των γενικευμένων σχετικών στοιχείων (ή ~) και της πιθανής εφαρμογής του.
Για να γράψω αυτό το άρθρο, ωθούμε από ένα μικρό επιπολασμό πληροφοριών σχετικά με αυτόν.

Τι είναι?

Το κύριο καθήκον του επιλογέα των γενικευμένων σχετικών στοιχείων είναι η επιλογή ενός στοιχείου που εμφανίζεται μετά από ένα δεδομένο στοιχείο και έχει έναν κοινό γονέα μαζί του.
Αναγκάζει όλα αυτά ως εξής:
A ~ b (στυλ)όπου ΕΝΑ. και ΣΙ. - Τιμές συμβολοσειρών που ορίζουν τον επιλογέα. Στυλ. - Ιδιωτικές ιδιότητες.
Παράδειγμα
Html:

Τίτλος

Υπότιτλος 1.

Είναι μια παράγραφο με κείμενο

Υπότιτλος 2.

Αυτό είναι το κείμενο που πλαισιώνεται σε απόσταση

CSS:
H1 ~ H2 (χρώμα: κόκκινο;)
Ως αποτέλεσμα, οι κεφαλίδες H2 θα βαφτούν με κόκκινο χρώμα, επειδή Έχουν ένα κοινό γονικό στοιχείο με την επικεφαλίδα H1, και στον κώδικα που στέκονται μετά από αυτό.

Εάν το στοιχείο θα σταθεί πάνω από την πηγή, τότε δεν θα επιλεγεί.

Θα πρέπει να θυμόμαστε ότι μόνο τα στοιχεία που έχουν κοινό γονέα με το πρωτότυπο και όχι εκείνες που έχουν μόνο έναν κοινό πρόγονο. Απεικονίζει το δεύτερο παράδειγμα καλά.

Παράδειγμα

Τίτλος

Υπότιτλος 1.

Είναι μια παράγραφο με κείμενο

Υπότιτλος 2.

Αυτή είναι η δεύτερη παράγραφο με κείμενο. Αυτό είναι το κείμενο που πλαισιώνεται στο άνοιγμα, το οποίο είναι εσωτερικό σημείο

Ως αποτέλεσμα, τίποτα δεν θα διακρίνει κόκκινο, επειδή Στοιχείο γονικού στοιχείου - P και στοιχείο H1 - άρθρο.
Προκειμένου να γίνει κόκκινος, είναι απαραίτητο είτε να το λάβετε από την παράγραφο σε ένα επίπεδο με το H1, είτε να το κάνετε:

Χρήση με: Τοποθετήστε το

Κατά τη γνώμη μου, ο επιλογέας χρησιμότητάς μου "A ~ B" εκθέματα σε μια δέσμη με τα γεγονότα των στοιχείων, όπως: Τοποθετήστε το hover ,: Focus, κλπ.
Εάν νωρίτερα, ήταν δυνατό να αλλάξετε το στυλ στοιχείων μόνο όταν τοποθετείτε το δείκτη του ποντικιού σε αυτό, τότε η χρήση του επιλογέα γενικευμένων σχετικών στοιχείων σάς επιτρέπει να αλλάξετε το στυλ ενός στοιχείου εκτός από το συμβάν που συνέβη.

Συμβολικά (στην περίπτωση του: hover) μοιάζει με αυτό:
Α: Hover ~ b (στυλ)όπου ΕΝΑ. - το στοιχείο στο οποίο αιωρείται ο δείκτης του ποντικιού και επάνω ΣΙ. Νέοι κανόνες στυλ διανέμονται.

Παράδειγμα

Html:
Μετακινήστε το δείκτη σε αυτή την επιγραφή και τα μπλοκ θα γίνουν πράσινα

Αριθμός μπλοκ 1

Αριθμός μπλοκ 2.

DIV (πλάτος: 100px; Ύψος: 50px, περιθώριο: 5px; φόντο: γκρι;) Span: hover ~ div (φόντο: πράσινο;)

Ως αποτέλεσμα, τα μπλοκ θα γίνουν πράσινο χρώμα, όταν επισκέπτονται την επιγραφή.

Αριθμός μπλοκ βαφής 2 σε πράσινο χρώμα
Αριθμός μπλοκ βαφής 1 σε μπλε χρώμα

Αριθμός μπλοκ 1

Αριθμός μπλοκ 2.

CSS: Span (δρομέας: δείκτης;) div (πλάτος: 100px; Ύψος: 50px; περιθώριο: 5px; φόντο: γκρι;) .Span1: hover ~ .block2 (φόντο: πράσινο;) .span2: hover ~ .block1 (φόντο : Μπλε;)

Μπορείτε να εφαρμόσετε έτσι:
Html:
Βάλτε το μπλοκ με κόκκινο χρώμα
Μπλοκ βαφής σε μπλε χρώμα
Ζωγραφίστε το μπλοκ σε πράσινο

ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ

CSS: Span (δρομέας: δείκτης;) div (πλάτος: 100px; Ύψος: 50px; περιθώριο: 5px; φόντο: γκρι;) .Spanred: hover ~ .block (φόντο: κόκκινο;) .spanblue: hover ~ .block (φόντο : Μπλε;) .SpanGreen: hover ~ .block (φόντο: πράσινο;)
Διαδήλωση

Anime

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

Παράδειγμα

Html:
σωστά Αριστερά Πάνω Κάτω

ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ

CSS: Span (θέση: απόλυτη, οθόνη: μπλοκ, πλάτος: 100px; Ύψος: 50px; περιθώριο: 10px; φόντο: ασήμι; δρομέας: δείκτης;) .left (Top: 12%;). Αριστερά: 40%;) .TOP (αριστερά: 20%;). (Κορυφή: 25%, Αριστερά: 20%;).) .Block (Θέση: Απόλυτη; Κορυφή: 50%. Δεξιά: 50%, πλάτος: 100px; Ύψος: 50px, περιθώριο: 5px; φόντο: γκρι; -webkit-μετάβαση: όλες οι 2ες ευκολίες · -ο-μετάβαση: όλες οι 2ες ευκολίες · -moz μετάβαση: όλα τα 2 δευτερόλεπτα ·). 10%;) .Left: hover ~ .block (δεξιά: 90%;) .top: hover ~ .block (Top: 10%;). Ηddown: hover ~ .block (Top: 90%;)
Διαδήλωση

Όπως μπορείτε να δείτε, ο επιλογέας γενικευμένων σχετικών στοιχείων έχει επαρκή αριθμό ενδιαφέρουσες τρόπους χρήσης. ΣΕ Πρόσφατα Το CSS έχει προχωρήσει μακριά και σας επιτρέπει να συνειδητοποιήσετε τι ήταν προηγουμένως δυνατό μόνο χρησιμοποιώντας το JavaScript.
Αλλά, κατά τη γνώμη μου, εάν διεξαχθείτε αναλογίες, το CSS είναι ένα μηχανικό στοιχείο (εάν θέλετε - "Σίδερο") το οποίο δεν προορίζεται να κατασκευάσει λογική. Το JavaScript, για παράδειγμα, μπορεί να λειτουργήσει ως "λογισμικό".
Έτσι, σε αυτό το άρθρο προσπάθησα να αποκαλύψω το θέμα του επιλογέα των γενικευμένων σχετικών στοιχείων. Αποδείχθηκε ή όχι, να σας κρίνει.

Για να αλλάξετε την ιδιότητα ενός συγκεκριμένου στοιχείου στο CSS, υπάρχει μια τέτοια έννοια ως ένας επιλογέας : hover.
Ιδιαίτερα διαδεδομένη Φτερουγίζω. Αποκτά όταν πρέπει να αλλάξετε την ιδιότητα συνδέσμου όταν τοποθετείτε το δείκτη του δρομέα. Για παράδειγμα, μπορούμε εύκολα να τονίσουμε τον σύνδεσμο, το οποίο δεν τονίζεται από προεπιλογή:

Μαθήματα, Συνταγές CSS

Με βοήθεια ΕΝΑΣ ΣΥΝΔΕΣΜΟΣ. και Α: Επισκέφτηκε Επισημάνσαμε ιδιότητες για όλους τους συνδέσμους, συμπεριλαμβανομένων εκείνων με τις οποίες ο χρήστης πέρασε νωρίτερα ( : επισκέφθηκε). Όλοι οι σύνδεσμοι αποκτούν πράσινο και γίνονται παρόμοιοι με το συνηθισμένο κείμενο, χωρίς υπογράμμιση. Ενώ Α: Τοποθετήστε το κεφάλι δίνει μια ένδειξη να τονίσει τον σύνδεσμο με κάθε δείκτη που αιωρείται.
Με τον ίδιο τρόπο, μπορούμε να προσθέσουμε μια εικόνα Curb όταν αιωρούνται ένα ποντίκι:

Δημιουργία S. Απλά παραδείγματα, Στρέφουμε σε ένα πιο σπάνιο έργο που τέθηκε στον τίτλο του άρθρου. Πώς να αλλάξετε τις ιδιότητες ενός παιδιού στοιχείο όταν αιωρείται το δρομέα στο γονικό στοιχείο;
Η κατάσταση επιτρέπεται πολύ απλά. Αρχικά, το γονικό στοιχείο με τον επιλογέα εκφράζεται : hover Στη συνέχεια, υπάρχει μια ονομασία ενός στοιχείου παιδιού που πρέπει να μετατραπεί:

Ζωντανή ζωή
δεν Στυλ CSS. Να μάθω.

Το CSS μαθαίνουν, δεν ζουν ζωή.

Όταν επισκέπτεστε την πρώτη πρόταση, κείμενο μέσα στην ετικέτα επισημαίνεται κόκκινο. Σε αυτή την περίπτωση, μέρος έξω Παραμένει πράσινο. Επίσης, το χρώμα δεν αλλάζει όταν τοποθετείτε το δρομέα στο κάτω κείμενο που βρίσκεται έξω από την ετικέτα

.
Έτσι ώστε η συνταγή να έχει γίνει πιο οπτική, ας φωνάξουμε το σκυρόδεμα Τεχνική εργασία: Υπάρχει ένα μπλοκ Δίνω μέσα στα οποία τοποθετούνται δύο εικόνες. Η πρώτη εικόνα εμφανίζεται και η δεύτερη - κρυμμένη και θα πρέπει να εμφανίζεται μόνο όταν τοποθετείτε το ποντίκι Δίνω.
Η λύση συνταγής είναι απλή:

: Όταν κόβετε τον κέρσορα στην εικόνα της οθόνης, εμφανίζεται ένα βέλος με μια πράσινη σκιά στην επάνω αριστερή γωνία. Όταν ο χρήστης αφαιρεί τον κέρσορα από την εικόνα, εικόνα playbutton.png. εξαφανίζεται ξανά.

Αξίζει να θυμηθούμε ότι ο σχεδιασμός div # Block: Τοποθετήστε το δείκτη του αιώνα εφαρμόζεται στην περίπτωση όταν

υπάρχει id \u003d "μπλοκ" . Όταν πρόκειται για την τάξη class \u003d »μπλοκ» Χρησιμοποιήστε το σημείο div.Block: Τοποθετήστε το δείκτη του αιώνα .

Οι ψευδοκλασίες καθορίζουν τη δυναμική κατάσταση στοιχείων που αλλάζουν χρησιμοποιώντας τις ενέργειες του χρήστη, καθώς και τη θέση στο δέντρο εγγράφων. Ένα παράδειγμα τέτοιου κράτους είναι ένας σύνδεσμος κειμένου που αλλάζει το χρώμα του όταν αιωρείται πάνω στο δρομέα του ποντικιού. Όταν χρησιμοποιείτε ψευδο-σχολεία, το πρόγραμμα περιήγησης δεν υπερφορτώνει το τρέχον έγγραφο, οπότε χρησιμοποιώντας τα ψευδο-σχολεία μπορείτε να λάβετε διαφορετικές δυναμικές επιδράσεις στη σελίδα.

Η σύνταξη της εφαρμογής των ψευδοκλασίων είναι επόμενη.

Επιλογέας: ψευδο-κλάση (Περιγραφή των κανόνων στυλ)

Αρχικά, ο επιλογέας ενδείκνυται να προστεθεί στην ψευδο-κλάση, τότε το κόλον ακολουθεί το όνομα του pseudoclassa. Επιτρέπεται να εφαρμόζει ψευδο-τάξεις στα ονόματα των αναγνωριστικών ή των κλάσεων (a.menu: hover (χρώμα: πράσινο)), καθώς και σε επιλεκτικούς συμφραζητές ( .Μενού Α: Τοποθετήστε το θέμα (φόντο: # fc0)). Εάν η ψευδο-κλάση καθορίζεται χωρίς έναν επιλογέα μπροστά (: Τοποθετήστε το δείκτη του αιτήματος), θα ισχύει για όλα τα στοιχεία του εγγράφου.

Όλες οι ψευδοκλασές χωρίζονται σε τρεις ομάδες:

ορίζοντας την κατάσταση των στοιχείων ·
που σχετίζονται με το δέντρο των στοιχείων.
Υποδεικνύοντας τη γλώσσα του κειμένου.

Ψευδοκάλυση που καθορίζουν την κατάσταση των στοιχείων

Αυτή η ομάδα περιλαμβάνει ψευδοκολάκια που αναγνωρίζουν την τρέχουσα κατάσταση του στοιχείου και χρησιμοποιούν το στυλ μόνο για αυτήν την κατάσταση.

: Ενεργός

Συμβαίνει όταν ενεργοποιηθεί ο χρήστης. Για παράδειγμα, ο σύνδεσμος ενεργός αν κοιτάξετε τον κέρσορα και κάντε κλικ στο ποντίκι. Παρά το γεγονός ότι σχεδόν οποιοδήποτε στοιχείο της ιστοσελίδας μπορεί να είναι ενεργό, η ψευδο-κλάση: ενεργή χρησιμοποιείται κυρίως για αναφορές.

: Σύνδεσμος.

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

Η καταγραφή ενός (...) και ενός: Link (...) είναι ίση με το αποτέλεσμα του, επειδή το πρόγραμμα περιήγησης δίνει το ίδιο αποτέλεσμα, οπότε η ψευδο-κλάση: η σύνδεση δεν μπορεί να υποδείξει. Μια εξαίρεση είναι, σε αυτά δράση: η σύνδεση δεν ισχύει.

: Συγκεντρώνω

Εφαρμόζεται στο στοιχείο κατά την παραλαβή της εστίασης. Για παράδειγμα, για μια φόρμα κειμένου, η απόδειξη εστίασης σημαίνει ότι ο δρομέας είναι εγκατεστημένος στο πεδίο και το κείμενο μπορεί να εισαχθεί σε αυτό (παράδειγμα 15.1) χρησιμοποιώντας το πληκτρολόγιο.

Παράδειγμα 15.1. Εφαρμογή ψευδοκλασιά: εστίαση

HTML5 CSS 2.1 IE CR OP SA FX

Ψευδοκολάκια

Το αποτέλεσμα του παραδείγματος παρουσιάζεται παρακάτω (Εικ. 15,1). Η δεύτερη γραμμή περιέχει το δρομέα, οπότε το πεδίο κειμένου έλαβε εστίαση.

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