Inline hover on 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

have you tried getting rid of the brackets on the :hover event? in-line styles generally don't require {} — Justin, Jun 04 '12 at 16:02
Hi, yes i just tried that now and it still didn't work, thanks for the help though — Al Hennessey, Jun 04 '12 at 16:03
You can't use `:hover` in inline styles. http://stackoverflow.com/questions/1033156/how-to-write-ahover-in-inline-css — dpk2442, Jun 04 '12 at 16:07
ok, thanks for the help, i think i am going to have to rethink the structure then, seeing as there are only 6 different images possible, i might just make 6 different classes and then print the php into the class name, that might work, thanks for the help — Al Hennessey, Jun 04 '12 at 16:11
Ok i have fixed it, just in case anyone has this problem in the future i scrapped all the inline css and just added a php print in the class id, i then made 6 different classes in a seperate css file, and was then able to add the :hover in that, so now it works great. — Al Hennessey, Jun 04 '12 at 16:19

score 2 · Answer 1 · answered Jun 04 '12 at 17:40

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/

score 0 · Answer 2 · answered Jun 06 '12 at 05:49

Try this:

HTML/PHP:

<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')"></div><!---end house_wrapper--->

<?php endwhile ?>

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

CSS:

<?php print $house_name; ?>:hover {
    background-image: url('images/HOUSES/<?php print "$house_name"; ?>_hover.png')
};

This should work as long as you don't have spaces in the picture's file name.

Inline hover on Div

2 Answers2