How do you show php foreach loop results as ajax mousehover?

[imgrooot]

Here's what I'm trying to do.

 

I retrieve results using php foreach loop. Within that loop results, I want to show a div(.show-details) on mouse over only.  How do I do that?

 

This is my code so far.  

<style>
  .show-details {
    display: none;
  }
</style>

$get_records = $db->prepare("SELECT * FROM records WHERE record_id = :record_id");
$get_records->bindParam(':record_id', $record_id);
$get_records->execute();
$result_records = $get_records->fetchAll(PDO::FETCH_ASSOC);
if(count($result_records) > 0){
    foreach($result_records as $row) {

    $get_record_title 	 		  =	$row['record_title'];
    $get_record_details 	 	  =	$row['record_details'];
    $get_record_price		          =	$row['record_price'];

    ?>
      <div class="product">
        <div class="product-title">
          <?php echo $get_record_title; ?>
        </div>
        <div class="product-price">
          <?php echo $get_record_price; ?>
        </div>
      </div>
      <div class="show-details">
        <?php echo $get_record_details; ?>
      </div>
    <?php

  }
} else {

  echo 'no results.';

}

<script>
  $(document).ready(function() {
    $(".product").mouseover(function(){
      $(".show-details").css("display", "block");
    });
  });
</script>

Edited June 22, 2016 by imgrooot

[ginerjm]

The php loop will happen on the server so the mouse over effect is moot at that point. The script will do its thing and return whatever to the client. At that point your html/css can hide the div if you want and a little JS can 'show' it upon mouseover.

 

Two separate processes.

[Barand]

You also need a mouseout to set the display back to "none"

[imgrooot]

The php loop will happen on the server so the mouse over effect is moot at that point. The script will do its thing and return whatever to the client. At that point your html/css can hide the div if you want and a little JS can 'show' it upon mouseover.

 

Two separate processes.

 

The thing is, if I have 10 records on a page and I use the above javascript code to show the hidden div, it will show the div for all 10 records at the same time. I don't want that.  I just want it show a div for each unique record one at a time as I hover my mouse over them.  So that is why I am asking what the javascript code will look like to make that work?

[imgrooot]

You also need a mouseout to set the display back to "none"

 

 

So something like this?

<script>
  $(document).ready(function() {
    $(".product").mouseover(function(){
      $(".show-details").css("display", "block");
    });
    $(".product").mouseout(function(){
      $(".show-details").css("display", "none");
    });
  });
</script>

[maxxd]

You'll have to target each 'show-details' class individually. Put that div inside the 'product' div and target it specifically. This is untested, but should theoretically work:

$(document).ready(function(){
	$('.product').mouseover(function(){
		$(this).find('.show-details').css({ display: 'block' });
	});
	$('.product').mouseout(function(){
		$(this).find('.show-details').css({ display: 'none' });
	});
});

[imgrooot]

 

You'll have to target each 'show-details' class individually. Put that div inside the 'product' div and target it specifically. This is untested, but should theoretically work:

$(document).ready(function(){
	$('.product').mouseover(function(){
		$(this).find('.show-details').css({ display: 'block' });
	});
	$('.product').mouseout(function(){
		$(this).find('.show-details').css({ display: 'none' });
	});
});

 

Yep the above works if I have the ".show-details" div as a child of parent div ".product" like this.

      <div class="product">
        <div class="product-title">
          <?php echo $get_record_title; ?>
        </div>
        <div class="product-price">
          <?php echo $get_record_price; ?>
        </div>
        <div class="show-details">
         <?php echo $get_record_details; ?>
        </div>
      </div>