WebHU - Programozási kérdések és válaszok

hogyan lehet megfelelően "eltűnni" egy elemet lebegni?

Megpróbálok egy span elemet eltüntetni lebegtetés közben. Nem működik jól.

Kód: (CSS)

.list-item-note { 
    font-size:9px;  
    color:#666;
    font-style: italic;
}
.list-item-note:hover {
    display: none;
}

Kód: (HTML)

<div class="list-item"><a href="#">Link Here</a>
    <span class="list-item-note">(This disappear on hover)</span>
</div>

Hogyan tudom eltüntetni a 'list-item-note' osztály elemét, ha a szülőelem fölé viszi az egérmutatót?

Biztos vagyok benne, hogy rosszul csinálom. Legalábbis remélem, hogy sikerül. Mint mindig köszönöm!

EDIT: Ha a szülő elem fölé viszem az egérmutatót, azt szeretném, ha eltűnne. Ez az elem "lista-elem" A kérdés megfelelően megfogalmazásra került, és megoldást találtunk. Eltávolítja a negatív szavazatot?

html css hover
06.12.2013

  • Egy elem elrejtése azt jelenti, hogy többé nem lebeg, igaz? 07.12.2013
  • Ehhez használhatja a opacity-t. 07.12.2013
  • Az átlátszatlanság használata: jsfiddle.net/N45c2 07.12.2013
  • Nem tudom, miért a negatív szavazás, de a kérdés az alábbiakban megoldódott. Probléma volt, hogy melyik elemmel kell alkalmazni a lebegtetést. A kérdés megoldva, a megoldás megvan. Eltávolítja a negatív szavazatot? 07.12.2013
  • Van egy további probléma a visibility: hidden szemponton vagy az átlátszatlanságon túl. Adj egy percet, és túllépek azon a két válaszon, amit már adott. 07.12.2013
  • Ok, nem tudtam megoldani a második problémát, amivel most szembe kell néznie, legyen az visibility: vagy opacity:... Mennem kell, különben tovább próbálnám finomítani. A válaszomban megjegyzéseket tettem arra az esetre, ha valaki más is foglalkozni szeretne az általam felvázolt mélyebb aspektussal. 07.12.2013
  • Valójában csak megpróbáltam @koenp válaszát, és ez megoldja az általam említett villogási problémát is. Itt tanult valamit a CSS árnyalatairól. 07.12.2013

Válaszok:


1

A probléma az, hogy az elrejteni kívánt elemen nem lesz :hover, amint eltávolítja, így újra megjelenik stb.

Van néhány lehetőséged:

Hozzáadhatja a :hover elemet egy szülőelemhez, amely önmagában nincs eltávolítva, így:

.list-item:hover .list-item-note {
    display: none;
}

Íme egy példa a jsfiddle-re: http://jsfiddle.net/KA8KU/

Alternatív megoldásként használhat egy átlátszatlansági trükköt: tegyük láthatatlanná az elemet az opacitás használatával:

.list-item-note:hover {
  opacity: 0;
}

Íme egy példa: http://jsfiddle.net/KA8KU/1/

06.12.2013
  • Remekül működött. Látom, hogy elrontottam ott. A szülőelemre kell alkalmazni. Remekül működött. Elfogadja, ha lejár az idő. Kösz! 07.12.2013
  • Adtam hozzá egy alternatív megoldást. Ellenőrizze, mi működik a legjobban az Ön esetében. 07.12.2013

    • 2

    Ahogyan Ön szeretné, ez tulajdonképpen a láthatóságról szól:

    .list-item-note:hover {
    visibility: hidden;
}

    FRISSÍTÉS: http://jsfiddle.net/digitalextremist/ZKuXh/

    Rendben, a második probléma, amit megpróbáltam megoldani, ha például Chrome-ot használ, az az, hogy akár átlátszatlanságot, akár láthatóságot használ a szöveg eltűnéséhez... amikor a kurzor magán a szövegen van, nem pedig a szöveg körüli szóközön. szöveget, a szöveg továbbra is megjelenik. Ez egy meghatóbb megoldás. Kipróbáltam a display: inline-cell és hasonlók használatát, de akárhogy is, ha az egyes karakterek fölé viszi a kurzort, a lebegő villogni látszik.

    CONCEDE: A opacity: valójában a helyes út, mert nincs benne villogás.

    06.12.2013
    Új anyagok
    A rádiógomb ellenőrzött eseményének használata a jQueryben
    Ebben a cikkben látni fogjuk, hogyan kell dolgozni a jquery választógombbal ellenőrzött eseményeivel. A választógombok HTML gombok, amelyek segítenek kiválasztani egyetlen értéket egy csoportból...
    Körkörös függőségek megoldása terraformban adatforrásokkal – lépésről lépésre
    Mi az a körkörös függőségek Dolgozzunk egy egyszerű eseten, amikor az SQS-sor és az S3-vödör közötti körkörös függőség problémája van egy egymástól függő címkeérték miatt. provider..
    Miért érdemes elkezdeni a kódolást 2023-ban?
    01100011 01101111 01100100 01100101 — beep boop beep boop Világunk folyamatosan fejlődik a technológia körül, és naponta fejlesztenek új technológiákat a valós problémák megoldására. Amint..
    🎙 Random Noise #2  – Örökbefogadás és hit
    az analitika íratlan világának gondozása Szeretné, hogy ezek a frissítések a postaládájába kerüljenek? Iratkozzon fel itt . "Ha önvezető autókat gyártanak, akkor mi miért ne..
    A legrosszabb politika és prediktív modellek májátültetésre jelöltek számára az Egyesült Államokban
    A máj (vagy óangolul lifer) az emberi test legnehezebb belső szervére utal, amely csendesen működik a nap 24 órájában. Mit csinál a máj? 500 feladatot hajt végre a szervezet egészségének..
    5 webhely, amely 2022-ben fejleszti front-end fejlesztői készségeit
    Frontendmentor.io A tényleges projektek létrehozásával a Frontendmentor.io segítséget nyújt a front-end kódolási képességeinek fejlesztésében. A kódolást azután kezdheti meg, hogy..
    Mikor kell használni a Type-t az interfészhez képest a TypeScriptben?
    A TypeScript a JavaScript gépelt szuperkészlete, amely statikus gépelést ad a nyelvhez. Ez megkönnyíti a robusztus és karbantartható kód írását azáltal, hogy a hibákat a fordítási időben..