Question

您好我正在尝试从数据库运行while循环以显示许多不同的记录，但是记录的显示方式是通过不同的图像，因此我无法使用标准css自定义它并通过内联css进行，但是我已经达到了显示每个图像正常的程度，但是在用户悬停时不会显示新图像，这里是相关div的行

<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--->

这是整个while循环的代码

    <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--->

感谢你们给予的任何帮助

Answer 1

你可以通过onmouseover和onmouseout使用javascript吗？例如：

<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>

演示 http://jsfiddle.net/UvPHp/9/

Answer 2

试试这个：

<强> 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')
};

只要图片的文件名中没有空格，这就可以了。

内联悬停在Div上

2 个答案: