Jquery hover aide - jquery

Le code ci-dessous ne fonctionne pas. Je veux quand la souris survole une div avec la classe = "rangée" pour afficher la div enfant. Je suis habitué à JavaScript mais je viens de m'ajuster à jQuery. Comment puis-je accomplir cela?

<script type="text/javascript">
$(function() {
$(".block").hide();
$(".row").hover(function() {
$(".block").show();

});

});
</script>
<?php

echo "<div class="row"><div class="block">one</div></div>";
echo "<div class="row"><div class="block">two</div></div>";
echo "<div class="row"><div class="block">three</div></div>";
echo "<div class="row"><div class="block">four</div></div>";

?>

Réponses:

2 pour la réponse № 1

Votre code affichera actuellement tous les éléments avec la classe "block" lorsqu'un élément avec la classe "row" est survolé. Vous devez sélectionner le bon .block élément:

$(function() {
$(".block").hide();
$(".row").hover(function() {
$(this).find(".block").show();
});
});

Cela utilise le .find méthode pour trouver un descendant de l'élément sélectionné qui correspond au sélecteur .block.

Je ne suis pas sûr de ce que vous voulez faire quand la souris quitte le .row élément, mais actuellement rien ne se passera (en fait, le même .show la ligne sera relancée, car c’est ce qui se passe quand un seul argument est passé à .hover). Si vous aviez l'intention de .block élément à masquer à nouveau, vous pouvez fournir un autre argument à .hover:

$(function() {
$(".block").hide();
$(".row").hover(function() {
$(this).find(".block").show();
}, function() {
$(this).find(".block").hide();
});
});

Sinon, vous pouvez vous en tenir à l’argument unique et utiliser le .toggle méthode à la place:

$(function() {
$(".block").hide();
$(".row").hover(function() {
$(this).find(".block").toggle();
});
});

---

1 pour la réponse № 2

Dans la fonction de survol, vous devez trouver le descendant de l'élément en cours, comme vous le faites:

$(".row").hover(function () {
$(this).find(".block").show();
});

this est l'élément courant (le survol .row élément), donc $(this) crée un objet jQuery à partir de celui-ci afin que vous puissiez y appeler des méthodes jQuery.

---

0 pour la réponse № 3

$(".row").hover(function(event) {
if (this == event.currentTarget) {
// run code here
}

---

0 pour la réponse № 4

Exemple de travail à: http://jsfiddle.net/theom3ga/yPCCn/

Vous devez juste vous adresser au bloc enfant, en utilisant $(".block", $(this))

---

0 pour la réponse № 5

$(".row").hover(function() {
$(".block",$(this)).show();
});

---

0 pour la réponse № 6

Il est très difficile pour l’utilisateur de passer la souris sur un élément caché (ou très petit).

Changez votre code pour quelque chose comme ça:

$(function() {
$(".block").hide(); // hide all .block elements
$(".row").bind("mouseover", function() { // bind a mouseover handler
$(this).find(".block").show();
}).bind("mouseout", function () { // bind a mouseout handler
$(this).find(".block").hide();
});
});

---

0 pour la réponse № 7

$(".row").mouseenter( function () {
$(".block", this).show();
$(this).siblings().find(".block").hide();
});

Dans ce cas, le survol n'a que peu de sens, sauf si vous souhaitez fermer le bloc complètement. cette méthode permet de garder la dernière rangée ouverte si vous vous éloignez de la souris.

http://jsfiddle.net/7SQdu/1/

Toutefois, si vous souhaitez fermer le bloc à chaque fois que votre souris quitte:

$(".row").hover(
function () {
$(".block", this).show();
},
function () {
$(".block", this).hide();
});

bien sûr, cela implique quelque chose comme .block {display: none;} dans vos css.

---

0 pour la réponse № 8

Pourquoi même utiliser JavaScript? Pourquoi ne pas utiliser simplement CSS? (sauf si vous avez vraiment besoin de supporter IE 6 et inférieur)

CSS:
.row .block { display: none; }
.row:hover .block { display: block; }

HTML:
<div class="row"><div class="block">one</div></div>
<div class="row"><div class="block">two</div></div>
<div class="row"><div class="block">three</div></div>
<div class="row"><div class="block">four</div></div>

Oh et comme @Ben Everard déclaré, pas besoin de echo

---