Hover auf einem CSS-table-cell auf alle Zeile angezeigt

Question

ich kämpfen, bin zu verstehen, warum mein Behälter (table-cell) verhalten sich nicht wie ich wünschte, ich will :)

Situation: ich einen div Container erstellt (Bouton) mit 2 div innen (Bild und Text). Was ich will: Hover irgendwo auf dem Container wird eine Hintergrundfarbe anwenden. Problem: Ich habe einen Hintergrundfarbe Hover zum div Container (Bouton) hinzugefügt, aber anstatt es nur auf alle div "Bouton" anzuwenden, wendet es es auf die ganze Zeile an. Hier

ist die 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); 
} 

Ich habe geschaut, aber ich bin etwas fehlt, wie die Tabellenzelle verhält .

Jeder kann helfen?

Vielen Dank,

Answer 1

Sie angelegt, um den Hintergrund und Schatten #bouton. Sie müssen es den div s im Inneren anzuwenden:

#bouton div:hover, 
#bouton div:active 

Dies wird Ihnen, was Sie wollen, aber Sie haben einige andere Probleme:

• Sie nicht div innerhalb a platzieren können.
• Sie versuchen, die Tabelle innerhalb der Zelle anzuzeigen, was keinen Sinn ergibt.
• Sie benötigen diese Anzeigetypen nicht einmal. Die div ist in der Lage zu tun, was Sie wollen, ohne seinen Anzeigetyp zu ändern.

Hier ist ein Code, der Ihnen nahe kommt, was Sie wollen. Sie können es nach Ihren Wünschen optimieren, aber es wird Ihnen den Einstieg:

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