imgrooot Posted June 22, 2016 Share Posted June 22, 2016 (edited) 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 Quote Link to comment Share on other sites More sharing options...
ginerjm Posted June 22, 2016 Share Posted June 22, 2016 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. Quote Link to comment Share on other sites More sharing options...
Barand Posted June 22, 2016 Share Posted June 22, 2016 You also need a mouseout to set the display back to "none" Quote Link to comment Share on other sites More sharing options...
imgrooot Posted June 22, 2016 Author Share Posted June 22, 2016 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? Quote Link to comment Share on other sites More sharing options...
imgrooot Posted June 22, 2016 Author Share Posted June 22, 2016 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> Quote Link to comment Share on other sites More sharing options...
maxxd Posted June 22, 2016 Share Posted June 22, 2016 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' }); }); }); Quote Link to comment Share on other sites More sharing options...
Solution imgrooot Posted June 22, 2016 Author Solution Share Posted June 22, 2016 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> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.