Позиционирование при наведении изображения перед таблицей

Question

Позиционирование при наведении изображения перед таблицей

1

Я пытаюсь разместить изображение и изображение hover над моей таблицей. Я пытался играть с позиции css, такой как absolute/relative/fixed/static. Но каким-то образом он либо появится поверх таблицы, либо подтолкнет таблицу к нижней части страницы.

Как разместить изображение над таблицей?

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);
?>

Doran L 05 нояб. 2015, в 12:29

Источник

0

Нам понадобится демоверсия с выводом HTML и CSS. PHP здесь не очень полезен для нас.
Paulie_D 05 нояб. 2015, в 11:23
0

Спасибо, я буду использовать стиль CSS вместо ... гораздо лучше
Doran L 06 нояб. 2015, в 06:15

Теги:

php

css

1 ответ

Ещё вопросы

Нам понадобится демоверсия с выводом HTML и CSS. PHP здесь не очень полезен для нас.
Спасибо, я буду использовать стиль CSS вместо ... гораздо лучше

Raz Weizman · Answer 1 · 2016-10-28T22-08-00.000Z

Вы хотели бы поместить таблицу в контейнер 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/