jQuery changement de couleur ou CSS?

Question

J'ai essayé d'obtenir un changement de couleur survolé/sélectionné pour un champ particulier, mais je pense que jQuery est la solution. J'ai examiné quelques didacticiels sur les clics de bouton, mais peut-être que je ne le vois pas ou que je ne le fais pas correctement. L'idée ici est que lorsqu'un utilisateur survole un titre, la couleur d'arrière-plan change, quand il clique sur le titre pour l'agrandir, la couleur d'arrière-plan reste constante (sélectionnée), mais comme elle se trouve maintenant la couleur d'arrière-plan les champs étendus ne changent pas.

Voici la démo: http://www.notedls.com/demo

Answer 1

Je vois que vous avez JQuery ajouter une classe sélectionnée à votre élément li lorsque vous cliquez dessus. En fonction de ce que vous voulez faire, vous pouvez colorier la couleur d'arrière-plan li.selected ou cibler la div en fonction de l'élément li.selected.

ul#acc1 li.selected { 
    background-color: #xxxxxx; 
} 

ul#acc1 li.selected div { 
    background-color: #xxxxxx; 
} 

Answer 2

Utilisez jQuery pour ajouter/supprimer des classes qui définissent les styles. Cela permettra de garder css séparé du code, ce qui est une meilleure solution, surtout si les concepteurs sont impliqués.

Answer 3

Pour des raisons d'accessibilité, elles doivent être créées sous la forme d'un ensemble de balises a> < dans la liste. C'est ainsi qu'un onglet de lecteur d'écran/clavier s'arrêtera sur le lien hypertexte.

Vous pouvez ensuite utiliser des pseudo-classes (états) telles que hover dans css pour que cela fonctionne même si le script est désactivé.

a:link {background-colorr:#FF0000;}  /* unvisited link */ 
a:visited {background-color:#00FF00;} /* visited link */ 
a:hover {background-color:#FF00FF;} /* mouse over link */ 
a:active {background-color:#0000FF;} /* selected link */