CSS：Hover会添加不必要的额外空白区域

Question

我只是想创建一个悬停，所以它将悬停在整个部分上，如下所示：

但是，每次我将鼠标悬停在我的产品上。 而这恰好发生了

它为下面的部分添加了额外的空白区域，并没有正确覆盖该部分。

我试过了..

• 更改行高
• 添加新的部分/ div
• 填充0，边距0

div#cat{
/*line-height: 30%;
height: 50px;*/
width: 61%;
margin-left: 39%;
height: 15px;
line-height: 50%

}

/*product area rollover/hover*/
div#cat:hover{
background-color: #e86065;
opacity: 0.5;
filter: Alpha(opacity=50);
background-position: 100% 100%;
height: 80%;
}

<div id='cat'>
<table>
<tr>
<td class='full'>
<a name='foodcat$iii' id='prods_nme'>$prod_name</a>
<td>
</td>
<p id='prods_desc'>$prod_desc</p>
</td>
<td class='price'>
<p id='prods_price'>£$prod_price</p>
</td>
<td class='add'>
<a href='Shopping_cart.php?add_item=$prod_id'>+</a>
</td>
</tr>
</table>
</div>

我的代码实际上是一个字符串，它将信息从数据库中循环出来。

 echo("<div id='cat$i' class='cat'>");

                                echo("<table>");
                                echo("<tr>");
                                echo("<td class='full'>");
                                echo("<a name='foodcat$iii' id='prods_nme'>$prod_name</a>");
                                echo("<td>");
                                echo("</td>");
                                echo("<p id='prods_desc'>$prod_desc</p>");
                                echo("</td>");


                                echo("<td class='price'>");
                                echo("<p id='prods_price'>£$prod_price</p>");
                                echo("</td>");


                                echo("<td class='add'>");
                                echo("<a href='Shopping_cart.php?add_item=$prod_id'>+</a>");
                                echo("</td>");
                                echo("</tr>");

                                echo("</table>");
                                echo("<br>");
                                echo("<br>");
                                echo("<hr id='hr'>");
                                echo("</div>");
                                echo("</div>");
                                echo("</div>");
                                echo("<br>");
                                echo("<br>");
                                $i++;

Answer 1

当CSS更改为悬停状态时，CSS会增加额外的高度。确保在您添加悬停样式时仅更改您想要的属性 - 在这种情况下，您不想更改高度。

你想要这样的东西：

div#cat{
    width: 61%;
    margin-left: 39%;
    height: 15px;
    line-height: 50%
}

/*product area rollover/hover*/
div#cat:hover{
    background-color: #e86065;
    opacity: 0.5;
    filter: Alpha(opacity=50);
    background-position: 100% 100%;
    width: 61%;
    margin-left: 39%;
    height: 15px;
    line-height: 50%
}

Answer 2

ArtOfCode为您的问题提供了正确的解决方案。

但是，使用表格进行格式化并不是一个好主意。当单元格被赋予边框时，您可以看到表格填充（我已经完成all the right things to eliminate）。表带来了许多格式问题。

我建议你改用DIV，并学习使用float:left和/或flexbox所需的三到四件事。

table{border-collapse:collapse;}
td{border:1px solid #ccc;padding:0;}

div#cat {
  /*line-height: 30%;
height: 50px;*/
  width: 61%;
  margin-left: 39%;
  height: 15px;
  line-height: 50%
}
/*product area rollover/hover*/

div#cat:hover {
  background-color: #e86065;
  opacity: 0.5;
  filter: Alpha(opacity=50);
  background-position: 100% 100%;
  height: 80%;
}

<div id='cat'>
  <table>
    <tr>
      <td class='full'>
        <a name='foodcat$iii' id='prods_nme'>$prod_name</a>
        <p id='prods_desc'>$prod_desc</p>
      </td>
      <td class='price'>
        <p id='prods_price'>£$prod_price</p>
      </td>
      <td class='add'>
        <a href='Shopping_cart.php?add_item=$prod_id'>+</a>
      </td>
    </tr>
  </table>
</div>