Box Daten div Show auf Schwebeflug

Question

Ich versuche, ein Raster mit Projekt-Boxen zu machen, und ich kann nicht ganz bekommen, um nur die Daten div entsprechenden Box anzuzeigen. Alle .data-divs werden beim Hover angezeigt.

Was fehlt mir? Es macht mich verrückt. Ich habe versucht, die "diese .data" irgendwie auszuwählen, aber es gab mir Syntaxfehler.

Vielen Dank im Voraus !!!

$(document).ready(function() { 
 
    $('.box').each(function(){ 
 
\t $(this).hover(\t 
 
\t function() { 
 
\t  \t console.log('entro'); 
 
\t  $('.box .data').css({"display":"block"}); 
 
\t }, 
 
\t function() { 
 
\t  \t console.log('salgo'); 
 
\t  $('.box .data').css({"display":"none"}); 
 
\t } 
 
\t); 
 
    }); 
 
});

echo "<div class='box' data-position='".$row->posicion."'>"; 
 
    echo "<div class='data'><h1>".$row->proyecto."</h1></div>"; 
 
    echo "<div class='imagen'><img src='".$row->thumbnail."'></div>"; 
 
echo "</div>";

Answer 1

Ich denke, man jQuery-Bibliothek hinzuzufügen vergessen. Bitte überprüfen Sie die folgende Ausgabe. Reicht das für dich?

$(document).ready(function() { 
 
    $('.box').each(function(){ 
 
\t $(this).hover(\t 
 
\t function() { 
 
\t  \t console.log('entro'); 
 
\t  $('.box .data').css({"display":"block"}); 
 
\t }, 
 
\t function() { 
 
\t  \t console.log('salgo'); 
 
\t  $('.box .data').css({"display":"none"}); 
 
\t } 
 
\t); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
echo "<div class='box' data-position='".$row->posicion."'>"; 
 
    echo "<div class='data'><h1>".$row->proyecto."</h1></div>"; 
 
    echo "<div class='imagen'><img src='".$row->thumbnail."'></div>"; 
 
echo "</div>";