Hover on a table-cell css displayed on all row - css

Question

I'm struggling to understand why my container (table-cell) don't behave how I wish I want :)
Situation : I created a div container (bouton) with 2 div inside (image and text).
What I want : hover anywhere on the container will apply a background-color.
Problem : I added a background-color hover to the div container (bouton) but instead of just applying it to all the div "bouton" it applies it to the all row.
Here is the Fiddle : 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);
}
I've been looking but I'm missing something on how the table-cell behaves.
Any one can help ?
Thanks a lot,

Answer 1

You applied the background and shadow to #bouton. You need to apply it to the divs inside it:
#bouton div:hover,
#bouton div:active
This will give you what you want, but you have several other issues:
You cannot place div inside a.
You're trying to display table inside cell, which doesn't make sense.
You don't even need these display types. The div is capable of doing what you want without changing its display type.
Here is some code that gets you close to what you want. You can tweak it to your liking, but it will get you started:
#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>