11548 sujets

JavaScript, DOM et API Web HTML5

Changement spécial d'arrière-plan au survol

Bonjour,
Est-il possible de survoler un lien, et que cela provoque un changement d'arrière-plan sur autre endroit que ce lien ?

Par exemple, en survolant un élément <li>, cela entraine un chargement d'arrière plan sur le <ul> le contenant.

Merci d'avance pour votre aide, je suis vraiment dans le pétrin...
Salut Ralf,

Réponse : Oui c'est possible. En pur CSS compatible partout je suis pas sur, faudrait creuser la question, mais il est tard Smiley langue

Avec une pointe de javascript pour changer la classe d'un objet sa marche.

Genre t'as un <div id="toto"> puis un lien <a href="#" onmouseover="toto.style=xxx" ...>

Du et si tu as défini une class .xxx qui a un fond différent ben ton div changera de fond... Je sais la syntaxe javascript est simplifiée et pas juste, mais si un truc comme ça te convient tu saura où chercher pour trouver la syntaxe correct Smiley lol
Si tu utilises jQuery:

[b][#black]JavaScript:[/#][/b]

$(function(){
	var activeClass = "active";
	$("#ma_liste li").hover(
		function(){ $(this).parent().addClass(activeClass); },
		function(){ $(this).parent().removeClass(activeClass); }
	);
});

[b][#black]CSS:[/#][/b]

.active {background:fuchsia;}
Ou sans jQuery, en JS inline des chaumières:
<li onmouseover="this.parentNode.className='blabla';"
    onmouseout="this.parentNode.className='';">
Ça m'ennuie que ce sujet ait été déplacé dans cette section, étant donné que je n'y connais rien de rien en javascript, et que j'évite d'en mettre dans mes sites.

Je voulais juste savoir si c'était possible ou pas en CSS, et dans le cas contraire je laissais tomber mon idée.

Mais bon, rien que parce que vous avez passé du temps à me répondre, je me dois d'essayer votre technique Smiley smile

Edit : rhâ, ça marche en plus. C'est fort quand même... Et si je veux cibler un élément pas du tout parent, je peux le faire comment ? Avec le nom des classes ?
Désolé hein, je vous avais pas menti quant à mes compétences js...
Modifié par Ralf (02 Feb 2009 - 11:54)
Je crois pas que ça soit possible en CSS à moins de passer par des trucs super tarabiscotés. Il arrive un moment ou il faut distinguer le comportemental de l'affichage Smiley cligne
Ralf a écrit :
Et si je veux cibler un élément pas du tout parent, je peux le faire comment ? Avec le nom des classes ?


Oui. Si je reprends le code de Benjamin avec jquery :

$(function(){

	var activeClass = "active";
	$("#ma_liste li").hover(
		function(){ $("#id_de_montruc_pas_parent").addClass(activeClass); },
		function(){ $("#id_de_montruc_pas_parent").removeClass(activeClass); }
	);
});
Là je comprends plus rien.

J'ai réussi à faire ce que je voulais avec le code de Florent, sans jquery. Pourriez m'aider à partir de ça ?
Ralf a écrit :
J'ai réussi à faire ce que je voulais avec le code de Florent, sans jquery. Pourriez m'aider à partir de ça ?

Tu peux éventuellement travailler avec des identifiants, et utiliser document.getElementById().

Ce qui donne:
<li onmouseover="document.getElementById('quelquechose').className='blabla';"
    onmouseout="document.getElementById('quelquechose').className='';">
où "quelquechose" est l'id de l'élément dont tu veux changer la classe au survol du LI.

Bon, c'est pas très propre comme manière de faire, mais ça devrait marcher.

Pour cibler sur une classe (et pas un identifiant), par contre, c'est plus dur et ça demandera quelques connaissances en JavaScript.

Ralf a écrit :
Ça m'ennuie que ce sujet ait été déplacé dans cette section, étant donné que je n'y connais rien de rien en javascript, et que j'évite d'en mettre dans mes sites.

Pour des réalisations personnelles ou professionnelles? Pour des sites perso, je comprends tout à fait qu'on fasse l'impasse sur JavaScript et qu'on se passe de ses capacités. Pour des sites pro... no comment?
Sujet clos
Aller à