ボックスデータdivをホバーに表示

Question

私はプロジェクトボックスでグリッドを作ろうとしていますが、そのボックスに対応するデータdivだけを表示することはできません。すべての.data divはホバーに表示されます。

私には何が欠けていますか？それは私を夢中にさせている。いくつかの方法を試してみましたが、私は何とか "この.data"を選択しなければならないことを知っていますが、構文エラーが出ていました。

ありがとうございます!!!

$(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

私はjQueryのライブラリを追加することを忘れ推測します。以下の出力を確認してください。それで十分ですか？

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