Following is the simple solution to make a div’s background color change on mouse over and then change back to the original color on mouse out. I have made available all the php, css and js code for you to first create the listing and then changing the div background color on mouse hover.
Before going into the details, first check the demo below:
Here’s the js code. Just include the jQuery and the hover code in the head of your doc.
Here’s is the css:
.box{padding:10px;margin-bottom:5px; border: 1px #e6e6fa solid;}
.bg1{ background-color: #f5f5f5;}
.bg2{ background-color: #fffafa;}
.bg-hover{ background-color: #fafae2;}
And here’s the markup with php code, assuming you have a result set of listing, this code will generate the listing with alternative bg color and mouse hover will highlight that div:
if(is_array($results)){
$i=0;
foreach($results as $k){
($i%2)? $bg_class ='bg1':$bg_class ='bg2';
echo '
‘; $i++; } }
Hope that helps.
Cheers!