Question

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

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

这是小提琴：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。您需要将其应用于其中的div：

#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>

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

1 个答案: