zwevende effect jQuery

Ik heb de volgende ongeordende lijst die ik wil verbergen als er niet overheen zweeft en wordt weergegeven wanneer ik erover zweef.

De CSS is de volgende

div ul li {visibility: hidden;}

Zoals je kunt zien heb ik de lijstitems gewikkeld in een div en de zichtbaarheid op verborgen gezet.

Nu volgens de hover-methode in jQuery, zou je in staat moeten zijn om op een eenvoudige manier de zichtbaarheid van de lijstitems eenvoudig zichtbaar te maken door

$('ul li')

.hover

(function()
{
.css("visibility","visible");
}

),

(function()
{
.css("visibility","hidden");

});

Wat mij een beetje onzeker maakt, is de $ ('ul li'). En ook, is het goed om een ​​css-functie toe te voegen in een hovering-effect zoals ik dat heb gedaan? Ik was niet zeker als ik CSS aan een functie zou moeten toevoegen aangezien ik heb gedaan. Alle tips worden gewaardeerd.

0
jouw mark-up heeft ook een fout. de eerste ul is niet gesloten
toegevoegd de auteur Dave Haigh, de bron
Je code zit vol met syntaxisfouten. jQuery is javascript, not some pseudo CSS language.
toegevoegd de auteur Esailija, de bron
@Esailija blijf alsjeblieft kalm. Niet iedereen denkt aan programmeren als een soort van levensstijl. Ik probeer een aantal functies voor mijn site te maken. Dus hou je gedachten voor jezelf en beantwoord gewoon mijn Q
toegevoegd de auteur Johnny Hankgard, de bron

2 antwoord

Je hebt jQuery of zelfs JavaScript daarvoor niet nodig, gebruik gewoon de CSS pseudo-class : hover . Stel een gebruiker voor die JavaScript niet activeert ...

ul li{
 //style of your list
  visibility: hidden;
}

ul li:hover{
 //style of your list when hovered
  visibility: visible;
}

Ook hoeft u hier uw lijst niet in te pakken in een div , wikkel het element niet in als u daar een goede reden voor heeft. Het vertraagt ​​de weergave van uw site in de browser.

1
toegevoegd
als je de ul instelt op verborgen. het zal het menu niet tonen. met andere woorden, je hebt een div nodig
toegevoegd de auteur Johnny Hankgard, de bron

u kunt ook de opdracht hide() proberen te gebruiken.

this.hide();

of

this.show();

that should wofk ^^

to get your own script wofking, you should change this:

.css("visibility","visible");

in dit:

this.css("visibility","visible");
0
toegevoegd