内联悬停在Div上

Question

Hi I am trying to run a while loop from a database to display a number of different records, however the way the record is displayed is through different images, therefore I cannot customize it using standard css and am doing it through inline css, however I have got it to the point where it displays each image fine, however won't display the new image on hover by the user, here is the line for the div concerned

<div id="house_wrapper" style="background-image: url(images/HOUSES/<?php print "$house_name";?>.png); :hover{background-image: url(images/HOUSES/<?php print "$house_name";?>_hover.png)};"></div><!---end house_wrapper--->

And here is the code for the entire while loop

    <div id="house_summary_content">

  <?php 
          $query = mysql_query("SELECT * FROM user_houses WHERE user_id='$user_id'");

          while($row = mysql_fetch_assoc($query)) : ?>
<?php extract($row);?>
<?php $sql_house = mysql_query("SELECT * FROM houses WHERE house_id='$house_id'");
$house_array = mysql_fetch_assoc($sql_house);
$house_name = $house_array['house_name'];?>
<div id="house_wrapper" style="background-image: url(images/HOUSES/<?php print "$house_name";?>.png); :hover{background-image: url(images/HOUSES/<?php print "$house_name";?>_hover.png)};"></div><!---end house_wrapper--->


 <?php endwhile ?>

</div><!---end house_summary_content--->

Thanks for any help you guys can give

Answer 1

Could you possibly use javascript through onmouseover and onmouseout? for example:

<div id="house_wrapper" style="background-image: url(http://i.imgur.com/F5iJY.jpg);width:100%;height:400px;" onmouseover="this.style.backgroundImage='url(http://i.imgur.com/YpJyG.jpg)';" onmouseout="this.style.backgroundImage='url(http://i.imgur.com/F5iJY.jpg)';"></div>​

Demo http://jsfiddle.net/UvPHp/9/