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

Question

我很难理解为什么我的容器（表格单元格）的行为不像我希望的那样:)

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

这是小提琴：https://jsfiddle.net/gicspy/qotv4yz0/3/

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>

CSS：

#bouton div {
  display: table-cell;
  cursor: pointer;
  background-color: #1ac658;
  color: #ffffff !important;
  padding: 5px;
  border: 0px;
  margin: 4px 2px;
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
  vertical-align: middle;
  max-width: 300px;
}

.bouton-image {
  display: table;
  border-radius: 3px 0px 0px 3px;
  min-width: 70px !important;
  margin: auto;
  text-align: center;
  overflow: hidden;
}

.bouton-texte {
  border-radius: 0px 3px 3px 0px;
  font-size: 130%;
  text-decoration: none;
  font-weight: bold;
}

#bouton:hover,
#bouton:active {
  -webkit-transition-duration: 0.4s;
  background-color: #f6416c !important;
  box-shadow: 0 6px 13px 0 rgba(0, 0, 0, 0.2), 0 4px 16px 0 rgba(0, 0, 0, 0.19);
}

我一直在寻找，但我错过了有关表格单元格行为方式的一些信息。

有人可以帮忙吗？

非常感谢，

Answer 1

您将背景和阴影应用到#bouton。你需要把它应用到里面的divs：

#bouton div:hover,
#bouton div:active

这将为您提供您想要的，但您还有其他几个问题：

• 您不能将div 放在a 中。
• 您试图在单元格内显示表格，这没有意义。
• 您甚至不需要这些显示类型。 div 能够在不改变其显示类型的情况下做你想做的事。

这里有一些代码可以让你接近你想要的。您可以根据自己的喜好对其进行调整，但它会让您入门：

#bouton a {
  display: block;
  border-radius: 3px;
  background-color: #1ac658;
  padding: 5px;
  margin: 4px 2px;
  text-align: center;
  vertical-align: middle;
  width: 400px;
}

.bouton-image {
  display: inline-block;
  min-width: 70px;
  text-align: center;
  overflow: hidden;
  float: left;
}

.bouton-texte {
  display: inline-block;
  font-size: 130%;
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  max-width: 300px;
}

#bouton a:hover,
#bouton a:active {
  -webkit-transition-duration: 0.4s;
  background-color: #f6416c !important;
  box-shadow: 0 6px 13px 0 rgba(0, 0, 0, 0.2), 0 4px 16px 0 rgba(0, 0, 0, 0.19);
}

<div id="bouton">
  <a href="/test/" title="test">
    <span class="bouton-image">
      <img class="clear-btn-devis" src="http://via.placeholder.com/100x120" width="100" height="120">
    </span>
    <span 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>
    </span>
    <br style="clear: both;" />
  </a>
</div>