Jquery hover help - jquery

Nižšie uvedený kód nefunguje. Chcem, keď sa myš pohybuje cez div s triedou = "riadok" na zobrazenie dieťaťa div. Používam JavaScript, ale práve teraz sa prispôsobujem jQuery. Ako to dosiahnuť?

<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>";

?>

odpovede:

2 pre odpoveď č. 1

Kódex bude v súčasnosti zobrazovať všetky prvky s triedou "block", keď sa bude pohybovať akýkoľvek prvok s triedou "row". Musíte vybrať správny .block element:

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

Toto používa .find metódu na nájdenie potomka vybraného prvku, ktorý sa zhoduje s voličom .block.

Nie som si istý, čo sa má stať, keď myš opustí .row prvok, ale v súčasnosti sa nič nestane (v skutočnosti to isté .show linka bude spúšťať znova, pretože to sa stane, keď sa odovzdá iba jeden argument .hover). Ak ste zamýšľali .block prvok, ktorý sa skryje znova, môžete dodať ďalší argument .hover:

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

Alternatívne sa môžete držať s jediným argumentom a použiť .toggle metóda namiesto toho:

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

---

1 pre odpoveď č. 2

Vo vnútri funkcie "hover" musíte nájsť potomka aktuálneho elementu, ktorý sa vám páči takto:

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

this je súčasný prvok (vznášajúci sa .row prvok), takže $(this) vytvorí z neho jQuery objekt, takže na ne môžete zavolať metódy jQuery.

---

0 pre odpoveď č. 3

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

---

0 pre odpoveď č. 4

Príklad práce na adrese: http://jsfiddle.net/theom3ga/yPCCn/

Stačí sa obrátiť na detský blok pomocou $(".block", $(this))

---

0 pre odpoveď č. 5

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

---

0 pre odpoveď č. 6

Je veľmi ťažké, aby používateľ vykonal presun myši na skrytý prvok (alebo na prvok, ktorý je veľmi malý).

Zmeňte kód na niečo podobné:

$(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 pre odpoveď č. 7

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

vznášadlo má v tomto prípade malý zmysel, s výnimkou prípadu, keď chcete úplne zatvoriť blok. táto metóda umožňuje udržať posledný riadok otvorený, ak sa túžite ďaleko od myši.

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

ak chcete zatvoriť blok vždy, keď myš opustí:

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

samozrejme to znamená niečo podobné .block {display: none;} vo vašom css.

---

0 pre odpoveď č. 8

Prečo používať aj JavaScript? Prečo nie len používať CSS? (ak naozaj nepotrebujete podporovať IE 6 a nižšie)

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 a ako @Ben Everard uviedol, že nie je potrebné echo

---