将鼠标悬停在所有行上显示的表格单元格css上

我很难理解为什么我的容器（表单元格）不能按我希望的方式工作：）

情境：我创建了一个div容器（bouton），里面有2个div（图像和文本）。 我想要的是：将鼠标悬停在容器上的任何位置都会应用背景色。 问题：我在div容器（bouton）中添加了一个背景色悬停，但它并没有将其应用于所有div“bouton”，而是将其应用于所有行

这是小提琴：

HTML:

<div id="bouton">
  <a href="/test/" title="test">
    <div class="bouton-image">
      <img class="clear-btn-devis" src="http://via.placeholder.com/100x120" width="100" height="120">
    </div>
    <div class="bouton-texte">
      THIS IS CONTENT FOR THE BUTTON
      <br /><span style="font-size:90% !important;"><p style="line-height: 1 !important;">(with more information even)</p></span>
    </div>
  </a>
</div>

我一直在寻找，但我遗漏了一些关于表格单元格行为的信息

有人能帮忙吗

---

非常感谢，

您将背景和阴影应用于

#bouton

。您需要将其应用于其中的

div

s：

#bouton div:hover,
#bouton div:active

这将满足您的需求，但您还有几个其他问题：

• 不能将

  div

  放在

  a

  内
• 您试图在单元格内显示表格，这没有意义
• 您甚至不需要这些显示类型。

  div

  能够在不更改其显示类型的情况下执行您想要的操作

下面是一些代码，可以让您接近您想要的内容。您可以根据自己的喜好进行调整，但这会让您开始：

波顿a{ 显示：块； 边界半径：3px； 背景色：#1ac658； 填充物：5px； 利润：4倍2倍； 文本对齐：居中； 垂直对齐：中间对齐； 宽度：400px； } 鲍顿先生{ 显示：内联块； 最小宽度：70px； 文本对齐：居中； 溢出：隐藏； 浮动：左； } 鲍顿·特克斯先生{ 显示：内联块； 字体大小：130%； 颜色：#ffffff； 文字装饰：无； 字体大小：粗体； 文本对齐：居中； 垂直对齐：中间对齐； 最大宽度：300px； } #鲍顿a：悬停， #鲍顿a：活跃的{ -webkit转换持续时间：0.4s； 背景色：#f6416c！重要； 盒影：0 6px 13px 0 rgba（0,0,0,0.2），0 4px 16px 0 rgba（0,0,0,0.19）； }

感谢您的时间和帮助。我的目标是有一个按钮，旁边有一个图像和一些文本。我希望所有东西都垂直和水平居中，这就是为什么我尝试使用表格单元格的方式。。。也许它没有任何意义，有一个更简单的方法来实现这一点：stackoverflow.com/questions/13983522/…问题是，这个解决方案是，在多个绘图上的文本将位于图像下方，我希望它保持在右侧。。。很抱歉弄得一团糟，谢谢你的帮助！我还尝试在两个div（文本和图像）上应用背景，但问题是我希望两个div同时具有悬停。不只是一个或另一个。它们当前有绿色背景，因此它们后面的任何内容都不可见。您必须将它们合并到一个

div

。文本对齐、内联块和垂直对齐进行得很好：；）指针事件及其显示

#bouton div:hover,
#bouton div:active