定位表格前的懸停圖像

我試圖將圖像懸停在圖像上方&。我試圖玩弄CSS的位置，如絕對/相對/固定/靜態。但不知何故，它會出現在桌面上或將桌子推到頁面的底部。定位表格前的懸停圖像

如何將圖像放在我的桌子上方？

CSS：

.searchbutton { 
position: relative; 
top: 10%; 
left: 40%; 
display: block; 
width: 450px; 
height: 450px; 
background-image: url('<?php echo $searchpic;?>'); 
background-repeat:no-repeat; 
} 

.searchbutton:hover { 
position: relative; 
top: 10%; 
left: 20%; 
display: block; 
width: 450px; 
height: 450px; 
background-image: url('<?php echo $searchhoverpic;?>'); 
background-repeat:no-repeat; 
}

PHP：

<?php 

include 'database_conn.php';  

$sql = "SELECT tablename.ID, tablename.Title, tablename.Year, tablename2.catDesc,tablename.catID 
      FROM tablename 
      LEFT JOIN tablename2 ON tablename.catID=tablename2.catID"; 

$queryresult = mysqli_query($conn, $sql) 
or die (mysqli_error($conn));  


    echo '<table cellpadding="0" cellspacing="0" class="db-table" table align="center">'; 
    echo"<tr><th>Title</th><th>Year</th><th>Category</th> </tr>"; 

while($row = mysqli_fetch_assoc($queryresult)) { 
    $iCDID = $row['ID']; 
    $CDTitle = $row['Title']; 
      $CDYear = $row['Year']; 
      $CDCatID = $row['catID']; 

      echo "<tr><td>"; 
      echo "<div> <a href = \"editCDForm.php?itemCode=$iCDID\">$CDTitle</a> </div>\n"; 
      echo "</td><td>"; 
      echo $row['Year']; 
      echo "</TD></tr>"; 
} 

    echo "</table>"; 

mysqli_free_result($queryresult); 
mysqli_close($conn); 
?>

來源

2015-11-05 Doran L

我們會需要與輸出HTML和CSS的演示。 PHP在這裏用處不大。 –

謝謝，我會用css風格來代替......好多了 –

你願意這樣做把表在一個div容器，並添加位置：相對於它。對於圖像，您需要一個位置：絕對可以覆蓋桌子。

HTML：

<div class="outer"> 
    <div class="image"></div> 
    <table> 
    <tr> 
     <td>a</td> 
     <td>b</td> 
     <td>c</td> 
    </tr> 
    </table>

CSS：

.outer { 
    position:relative; 
} 
.image { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100px; 
    opacity:0.4; 
    height:100px; 
    background:red; 
}

https://jsfiddle.net/cL12xgx6/

來源

2016-10-28 23:48:11

定位表格前的懸停圖像

回答

相關問題