A lépcsőzetes stíluslapok (CSS) a vagy XML (beleértve az XHTML, SVG) formátumot. Ez egy stíluslapnyelv, amelyet elsősorban az elemek sokféle formázási módszerrel történő leírására használnak. Az egyik módszer lebeg, és ebben a cikkben a következő módon fogjuk megérteni a lebegést a CSS-ben:

• Mi az egérmutató a CSS-ben?
• Hol használják az egérmutatót?
• Mit csinál a Hover?
• Kompatibilitás
• Hogyan működik?
• Vigye az egérmutatót a háttér színére „pirosra”
• Lebegő átlátszatlanság létrehozása a képeken
• Szövegfedvény létrehozása képeken

Mi az egérmutató a CSS-ben?

A CSS hover egy választókomponens, amelyet különböző elemek stílusához használnak, amikor az egérmutató felettük lebeg. Szinte minden HTML elemen használhatók. A CSS lebegő funkciója jelentős jelentőséggel bír a weboldal tervezésében.

A lebegő komponens kiemelheti, kódolhatja és testreszabhatja a weboldalakat a felhasználó preferenciái szerint egy kompakt és hatékony web-tervező programban.

Hol használják az egérmutatót?

A lebegő funkció életképességének leggyakoribb példái kiemelhetők olyan nagy vásárlási webhelyeken, mint a Flipkart és az Amazon. Amikor a felhasználók az e-kereskedelmi webhelyek bármelyik termékén lebegnek, a termék egy automatizált nagyítás lebegtetési funkció végrehajtására van programozva, hogy az ügyfél jobban át tudja látni a kiválasztott termékeket. Ezzel a programozással a weblapot úgy tervezték, hogy a teljes termékpaletta kompakt nézetét jelenítse meg, valamint az érdeklődésre számot tartó termék részletes nézetét egyetlen weblaptervben.

Mit csinál a Hover?

A lebegő egy többfunkciós programozási eszköz, amelyen keresztül a felhasználó végtelen számú formázási kritériummal testreszabhatja a célelemet. A lebegés funkció működési know-how-jának néhány példája a következőket tartalmazza:

• Háttér / betűszín megváltoztatása
• Rejtett szöveg beágyazása az egérrel
• Rollover Effects létrehozása a képeken
• Automatikus nagyítás a szöveg / képek között
• Módosítsa a kép fedőképességét
• Szöveg beágyazása
• Képcsere
• Div. Lebeg
• Több más CSS lebegő formázási művelet.

A lebegő hatás alapvetően módosítja az elem tulajdonságértékét, hogy lehetővé tegye a megadott szöveg / kép vagy a megfelelő elemek változásainak animálását. A CSS lebegő elemek beágyazása egy weblaptervbe átalakítja a szokásos weboldalt interaktív, robusztus és rendkívül funkcionális weboldallá. Ezek a weboldalak felhasználóbarátak és átfogóak. Az egérmutatóval tervezett weboldalak nagyobb fogyasztói vonzattal bírnak, és felhívják a potenciális ügyfelek figyelmét.

mi a különbség a html és az xml között

Az egérrel való kompatibilitás a CSS-ben

Az egérmutató funkció kompatibilis az összes főbb webböngészővel. Ennek az elemnek az érintőkészüléken történő megvalósítása azonban még mindig kihívást jelent. A lebegés a CSS-ben lehetővé teszi a tartalomhozzáférést azokon az eszközökön, amelyek nem támogatják az lebegési funkciókat. Megfigyelték, hogy a nem támogató eszköz aktivált lebegési funkciója elakadhat az eszközön.

Következésképpen a létfontosságú tartalom létfontosságú megjelenítését a formázási probléma akadályozza. Egyfelől, ahol a CSS program lebegő eleme hozzájárul a weboldalak hatékony személyre szabásának magas szintjéhez, fordítva, annak működőképessége mobileszközökön nagyon szunnyadó. Az informatikai világ jelentősen növekvő körülményeinek való megfelelés esetén a lebegés funkció elavulhat a technológiai fejlődéssel. Ezért rendkívül fontos egy hordozható beágyazott funkció gyártása, amely érintőképernyős és mobil eszközökkel is működik.

Hogyan működik az egérmutató a CSS-ben?

Az aktív ál-osztály stílus domináns a CSS lebegő formázásában, és felülír minden / minden további linket, amelyet ez az ál-osztály követ. Például a „pseudo-class” kategóriában: link: látogatott, vagy: aktív: a lebegő szabályt a: link és: látogatott, de előtte: aktív a megfelelő: lebegő stílus után kell elhelyezni. Az LVHA-sorrend:: link,: hover,: látogatott és: aktív referenciaként szolgál a megfelelő: lebegő formázási stílushoz.

div {háttér-szín: zöld párnázás: 18px kijelző: nincs} átfedés: lebegés + div {kijelző: blokk}Hover Test!A rejtett kód látható az egérrel

A fenti kódban a span elemet úgy módosítják, hogy egyesítse a lebegő és a div elemet a span: hover + div elem felhasználásával. Az elsődleges céloldalon megjelenő span elem a „Hover test!” Szöveget jeleníti meg. A span elemen való további lebegés feltárja a div elemet: „Rejtett kód jelenik meg az egérrel”. Ez a beágyazási formátum a szövegen és a képeken egyaránt használható.

Vigye az egérmutatót a háttér színére „pirosra”

p: lebeg, h1: lebeg, a: lebeg {háttér-szín: piros}
Hover vörös
 
Hover vörös
 
Linkek:
 
Hover teszt vörös:
  Google com  
  Jegyzet: Szia
 

A fenti kód testreszabja a

,

és elemet, és integrálja őket egy közös lebegési funkcióba. Ezt a kódot arra tervezték, hogy a szöveg színét vörösre változtassa, amikor az egérmutató fölé viszi őket. A h1 és h2 komponensen a „CSS: Hover Test Code” és a „Hover Red” felirat látható. A bekezdéselem: Hover Test Red és a horgonycímke: a google.com piros színnel jelenik meg, amikor az egérmutató fölé viszi őket.

Lebegő átlátszatlanság létrehozása a képeken

.pic {width: 1900px magasság: 1900px átlátszatlanság: 1 szűrő: alfa (átlátszatlanság = 100) háttér: url (https://cdn.pixabay.com/photo/2013/07/13/11/29/orange-158258_1280. png) no-repeat} .pic: lebegtetés {átlátszatlanság: 0,2 szűrő: alfa (átlátszatlanság = 30)}

A fenti CSS program megjeleníti a kép átlátszatlanságának módosítását lebegve. A kép eredeti átlátszatlansága: egy azonban az opacitás lebegőszűrő alkalmazásával ugyanez 0,2-re módosult. Ez a kód azt mutatja, hogy a lebegő elem használatával módosítani lehet egy kép és / vagy szöveg átlátszatlanságát.

Szövegfedvény létrehozása képeken

.pic {width: 4000px height: 2170px background: url (http://eatlogos.com/food_and_drinks/png/vector_orange_logo.png) no-repeat} .text {width: 3400px height: 2170px background: #FFF opacity: 0} .pic: hover .text {átlátszatlanság: 0.6 text-align: igazolja a színt: # 000000 font-size: 20px font-weight: 700 font-family: 'Times New Roman', Times, serif padding: 30px} A narancs egy rost gazdag gyümölcs. A narancsban található antioxidánsok elősegíthetik az emésztést, ragyogóvá varázsolhatják a bőrt és öregedésgátló elemként működhetnek.

A CSS hover szövegrétegezése hatékony eszköz a kép leíró szövegének a képbe való beágyazására. Ez az eszköz segít kompakt áttekintést nyújtani a képről, anélkül, hogy a korlátozott webtervezési helyben alvó helyet foglalna el. Ebben a kódban a háttérkép be van ágyazva egy leíró szöveggel, amely akkor jelenik meg, amikor az egérmutató lebeg a szöveg fölött.

Ez lezárja az egérmutató minden fontos szempontját a CSS-ben, és kiemeli annak használhatóságát a webfejlesztésben. Számos speciális effektus létezik, amelyet weboldalainkra behozhat. Mindig kipróbálhatjuk a lebegő választó különböző kombinációit más CSS tulajdonságokkal, például animációval, háttérképekkel, hiperhivatkozásokkal stb., És felfedezhetjük annak lehetőségeit, amint néhány példánkban láttuk. Végül, a CSS az egyik leghatékonyabb módja a weboldalak tervezésének és átalakításának, ezért a webfejlesztők számára elengedhetetlen, hogy megszerezzék ezt a készséget dinamikus weboldalak készítése érdekében.

Nézze meg a mi oldalunkat amely oktató által vezetett élő képzéssel és valós projekt-tapasztalattal jár. Ez a képzés elsajátítja a back-end és a front-end webes technológiákkal való együttműködés képességeit. Ez magában foglalja a webfejlesztés, a jQuery, az Angular, a NodeJS, az ExpressJS és a MongoDB képzését.

Van egy kérdésünk? Kérjük, említse meg a „Hover in CSS” blog megjegyzés rovatában, és mi kapcsolatba lépünk Önnel.