რა არის ჰოვერის ეფექტები?

2024 ავტორი: Lynn Donovan | [email protected]. ბოლოს შეცვლილი: 2023-12-15 23:49

ჰოვერის ეფექტი : პოპ და ფონის ანიმაცია. ჰოვერის ეფექტი პროდუქტისთვის. სურათი ჩნდება მაღლა და ქვევით, შემდეგ კი ფონი სრიალებს გარეთ და აცოცხლებს.

ასევე იცოდეთ, როგორ აჩენთ ტექსტს, როდესაც სურათი ჩერდება?

როგორ აჩვენოთ ანიმაციური ტექსტი სურათზე Hover-ზე მხოლოდ CSS3-ის გამოყენებით

1. შექმენით HTML¶ დაამატეთ თქვენი სურათი გამოყენებით

   ტეგი და ტექსტი. პირველ რიგში, თქვენ უნდა დაამატოთ თქვენი სურათი გამოყენებით

   ტეგი.

2. შექმენით CSS¶ Set:hover სელექტორი. Hover-ის ეფექტი დაყენებულია:hover ფსევდოკლასის გამოყენებით, რომელიც ირჩევს და აფორმებს ელემენტს.

შეიძლება ასევე გკითხოთ, როგორ იყენებთ ჰოვერს? :hover სელექტორი გამოიყენება ელემენტების ასარჩევად, როცა მაუსის გადატანა მათზე.

1. რჩევა::hover სელექტორი შეიძლება გამოყენებულ იქნას ყველა ელემენტზე და არა მხოლოდ ბმულებზე.
2. მინიშნება: გამოიყენეთ:link ამომრჩეველი დაუთვალიერებელი გვერდების ბმულების სტილისთვის,:visited ამომრჩეველი მონახულებული გვერდების სტილის ბმულებისთვის და:active ამომრჩეველი აქტიური ბმულის სტილისთვის.

აქედან გამომდინარე, როგორ ვაჩერებთ სურათს CSS-ში?

პასუხი: გამოიყენეთ CSS background-image თვისება

1. შეცვალეთ სურათი Hover-ზე CSS-ში
2. .ბარათი {
3. სიგანე: 130px;
4. სიმაღლე: 195px;
5. ფონი: url("images/card-back.jpg") არ განმეორდეს;
6. ჩვენება: inline-block;
7. }

როგორ მოვიშორო ჰოვერი?

ჰოვერის ეფექტის გამორთვისთვის მე მაქვს ორი წინადადება:

1. თუ თქვენი ჰოვერის ეფექტი გააქტიურებულია JavaScript-ით, უბრალოდ გამოიყენეთ $. unbind ('Hover');
2. თუ თქვენი ჰოვერის სტილი გააქტიურებულია კლასის მიხედვით, მაშინ უბრალოდ გამოიყენეთ $. removeClass('hoverCssClass');