框数据div显示悬停

Question

我正在尝试使用项目框创建一个网格，我不能完全显示它只显示与所述框相对应的数据div。所有.data div都在悬停时显示。

我错过了什么？这让我疯狂。尝试了几种方法，我知道我必须以某种方式选择“这个.data”，但它给了我语法错误。

提前致谢!!!

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

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(){
	$(this).hover(	
	   function () {
	   	  console.log('entro');
	      $('.box .data').css({"display":"block"});
	   }, 
	   function () {
	   	  console.log('salgo');
	      $('.box .data').css({"display":"none"});
	   }
	);
  });
});

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