Bonjour,
Tout d'abord je ne suis pas très bon en JS mais je connais les bases. Je rencontre actuellement un problème qui est que lors du survol des li, rien ne se passe, je ne sais pas pourquoi
Voici le script
<script type="text/javascript">
$('li').hover(function(){
console.log('123 soleil');
$(this).fadeOut( 100 );
$(this).fadeIn( 500 );
});
</script>
<div class="row col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1 col-sm-10 col-sm-offset-1">
<div class="panel panel-info">
<?php
$res = "";
if(empty($element)){
$res .= "<div class='panel-heading'><h3 class='panel-title'>Pas d'articles pour la catégorie ". $libArt ."</h3></div><div class='panel-body'>";
}
else{
$res .= "<div class='panel-heading'><h3 class='panel-title'>Articles pour la catégorie ". $libArt ."</h3></div><div class='panel-body'><ul>";
foreach ($element as $key => $value) {
$link = $this->Html->link($value['Article']['libelle'],array('controller'=>'article', 'action'=>'show', $value['Article']['id']));
$res .= "<li class='corps'>". $link ."</li>";
}
}
$res.= "</ul>";
echo($res);
?>
</div>
</div>
<?php echo $this->Html->Link('Retour', $url, array('class' => 'btn btn-info')); ?>
</div>
Je cherche donc à atteindre mes li avec le script mais avec mon code actuel, il n'y a que les li de ma barre de navigation qui sont actionnés.
Ton script, tu le place bien juste avant la fin de la fermeture de la balise body
?
Bonjour.
Pour commencer, tu devrais éviter de faire une sélection aussi large.
Étant donné que tu as une classe sur tes li
et s'il n'y a que cette liste qui a cette classe, tu devrais restreindre la sélection sur cette classe, donc par exemple :
$('li.corps').hover(function(){
/* ... */
});
Sinon, ta fonction sera effective sur n'importe quelle liste que tu auras sur tes pages.
Bonjour,
J'ai essayé cette facon aussi d'ou la classe sur le li mais j'ai toujours le même résultat
Le html
<li class="corps"> un truc super </li>
<li class="corps">un autre truc super </li>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
le js
$(function(){
$(".corps").on('hover',function(){
// faire un super truc
});
})
En gros :
Si ça ne fonctionne pas (ce qui serait très étrange), regarde ton inspecteur d'élément et cherches l'erreur.
cordialement
J'ai changé la place de mon script et c'est bon ça fonctionne. Je pourrais cependant savoir pourquoi ça fait ça?
Par habitude on met les scripts en bas de page, car les appelles via des scripts externes (comme jQuery importé depuis google) peuvent bloquer le chargement du DOM