Jak ustawić Ahover na podstawie klasy

":unosić się”Jest jedną z najpopularniejszych pseudoklicznych klasy, która służy do dodania efektu dowolnego elementu na myszce lub kursora. Jest to rozpoznawane tylko w arkuszu stylów CSS, co oznacza. Aby zastosować „: Włóż” na elemencie, lepiej przypisać elementowi klasę lub atrybut ID i użyć tej pseudoklasy do arkusza stylów, aby dodać efekt zawisowywania.

Ten samouczek wyjaśni:

• Co to jest „A: Wover” w CSS?
• Jak ustawić „A: Hover” na podstawie klasy?

Co to jest „A: Wover” w CSS?

"Odp.: Wpadek”Służy do dodania efektu najemnika na osadzone łącza lub znacznika kotwicy. Tutaj „A: Hover” zawiera tagi kotwiczne ””I„: Hover ”pseudoklasa. Jest ogólnie używany do wyzwalania elementu „” w CSS. Może również dodać efekty do elementu „A”, zmieniając kolor łącza, styl kursora, kolor tła i wiele innych.

Jak ustawić „A: Hover” na podstawie klasy?

Ustawić "Odp.: Wpadek”W oparciu o klasę wypróbuj podane instrukcje.

Krok 1: Zrób pojemnik „Div”

Początkowo utwórz pojemnik za pomocą „”Oznacz i przypisz to„ID" atrybut.

Krok 2: Utwórz kolejny pojemnik „Div”

Następnie stwórz zagnieżdżoną „div”Pojemnik pomiędzy pierwszym pojemnikiem i przypisuj„klasa”Atrybut o określonej nazwie.

Krok 3: Wstaw metkę „”

Następnie wstaw „”Tag, który jest wykorzystywany do łączenia jednej strony z drugą. Następnie wstaw wspomniany atrybut do znacznika otwierającego „”, gdzie:

• "klasa”Jest wykorzystywany do jednoznacznej identyfikacji elementu o nazwie.
• "Href„Atrybut służy do przechowywania adresu URL innego adresu strony lub docelowego:

Strona główna
Dom
o mnie

Wyjście powyższego kodu jest następujące:

Krok 4: Styl główny pojemnik „Div”

Aby stylizować główny pojemnik „Div”, przede wszystkim uzyskać dostęp do „„Element według nazwy ID z„#”Selektor. W naszym przypadku użyliśmy „#Main-Div". Następnie zastosuj nieruchomości poniżej na liście:

#Main-Div
Border: 3Px stały niebieski;
Margines: 20px 50px;
Wyściółka: 50px;
Rozmiar czcionki: większy;
kolor tła: bisque;

Tutaj:

• „„granica„Właściwość służy do zdefiniowania granicy lub zarysu wokół elementu.
• "margines„Przydziela przestrzeń poza zdefiniowaną granicą.
• "wyściółka”Służy do określenia przestrzeni wewnątrz zdefiniowanej granicy i wokół zawartości elementu.
• "rozmiar czcionki„Właściwość określa rozmiar czcionki.
• "kolor tła”Jest wykorzystywany do ustawienia koloru na tylnej części elementu w granicy.

Wyjście

Krok 5: Ustaw „A: Hover” na podstawie klasy

Teraz uzyskaj dostęp do wewnętrznego „div”Element za pomocą przypisanej klasy z selektorem kropkowym„.menu główne”I wykorzystaj„Odp.: Wpadek„Pseudo klasa, aby dodać efekt najemnika do„" element.

W tym celu zastosuj wspomniane właściwości:

.Main-Menu A: Hover
Kolor: RGB (247, 137, 12);
Border: 2px kropkowany niebieski;
Radiusz graniczny: 20%;

Oto opis wyżej wymienionego kodu:

• "kolor„Właściwość jest wykorzystywana do ustawienia koloru tekstu.
• "granica”Definiuje granicę wokół„" element. Na przykład zastosowaliśmy kropkowaną niebieską granicę na zawisie.
• "Radiusz graniczny”Ustawia krawędzie elementu w zaokrąglony kształt:

Chodziło o ustawienie A: Ever na podstawie klasy w CSS.

Wniosek

Ustawić „Odp.: Wpadek„Pseudo-klasa oparta na klasie, po pierwsze, utwórz kontener DIV za pomocą„”Tag i przypisz to atrybut klasowy. Następnie wstaw „„„Element do połączenia innej strony internetowej. Następnie uzyskaj dostęp do elementu „Div” za pomocą klasy i zastosuj efekt najemnika na link za pomocą „A: Wover”. Ten post wykazał metodę ustawiania „A: Ever” w oparciu o klasę.