ホバーは、すべての行

Question

に表示されるテーブルセルのCSSに私は私のコンテナ（テーブルセル）私は:)

状況を望んたいどのように動作していない理由を理解するために苦労している：私はdivのコンテナを作成しました2つのdiv（イメージとテキスト）を持つ（bouton）。 必要なもの：コンテナの任意の場所に移動すると、背景色が適用されます。 問題：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に背景と影を適用します。

#bouton div:hover, 
#bouton div:active 

これは何をしたいあなたを与えるだろうが、あなたは他のいくつかの問題があります：あなたは、その内部div秒にそれを適用する必要があり

• あなたはa内divを配置することはできません。
• セル内に表を表示しようとしていますが、これは意味をなさないものです。
• これらの表示タイプは必要ありません。 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>