全体をホバー可能にしてクリック可能にする

Question

画像の上にマウスを移動すると、画像とテキストがある部分の両方をクリックできます。また、テキストの一部が赤色で強調表示されています。テキストの上にマウスを置くと、テキストの背景領域も赤に変わり、テキスト部分と画像部分がクリック可能になります。私が望むのは、画像の上にマウスを置くと、テキストエリアの全部とテキストエリアの下の白いエリアがホバーラブル/クリック可能である（画像のすぐ隣の白い部分、画像の全高およびテキスト領域の全幅）。矩形ブロック全体をホバーブル/クリック可能にすることは可能ですか（そしてそのテキスト領域ブロックだけではない）？

.well.sb:hover { 
 
    color: #FFF; 
 
    background-color: #A10000; 
 
    text-decoration: none; 
 
    -moz-transition: .6s ease-in-out; 
 
    -webkit-transition: .6s ease-in-out; 
 
    -o-transition: .6s ease-in-out; 
 
    -ms-transition: .6s ease-in-out; 
 
    transition: .6s ease-in-out; 
 
} 
 

 
.well.sb:hover div { 
 
\t color:#FFF; 
 
\t text-decoration:none; 
 
\t -moz-transition: .6s ease-in-out; 
 
    -webkit-transition: .6s ease-in-out; 
 
    -o-transition: .6s ease-in-out; 
 
    -ms-transition: .6s ease-in-out; 
 
    transition: .6s ease-in-out; 
 
} 
 

 
.well.sb { 
 
    background-color: #FFF; 
 
    text-align: left; 
 
    padding: 0; 
 
    border: none; 
 
    border-bottom: 1px solid #e3e3e3; 
 
    text-decoration: none; 
 
    -moz-transition: .6s ease-in-out; 
 
    -webkit-transition: .6s ease-in-out; 
 
    -o-transition: .6s ease-in-out; 
 
    -ms-transition: .6s ease-in-out; 
 
    transition: .6s ease-in-out; 
 
} 
 

 
.article-image img { 
 
    width: 40%; 
 
    height: auto; 
 
    margin-right: 10px; 
 
    margin-top: 0px; 
 
    float:left; 
 
}

<div class="well sb"> 
 
<div> 
 
     <a href="#"> 
 
     <div class="article-image"> 
 
      <img alt="#" src="http://lorempixel.com/100/100"> 
 
      
 
      <div class="tag"> 
 
       TAG 
 
      </div> 
 
      <div class="title"> 
 
       TITLE 
 
      </div> 
 
     </div></a> 
 
    </div> 
 
</div>

Answer 1

float:leftニーズを使用して溶液を浮上コンテンツの高さを計算する親のためclear:both続くことができます。

.article-image:after{ 
    content: ''; 
    clear: both; 
    display:block; 
} 

.well.sb:hover { 
 
    color: #FFF; 
 
    background-color: #A10000; 
 
    text-decoration: none; 
 
    -moz-transition: .6s ease-in-out; 
 
    -webkit-transition: .6s ease-in-out; 
 
    -o-transition: .6s ease-in-out; 
 
    -ms-transition: .6s ease-in-out; 
 
    transition: .6s ease-in-out; 
 
} 
 

 
.well.sb:hover div { 
 
\t color:#FFF; 
 
\t text-decoration:none; 
 
\t -moz-transition: .6s ease-in-out; 
 
    -webkit-transition: .6s ease-in-out; 
 
    -o-transition: .6s ease-in-out; 
 
    -ms-transition: .6s ease-in-out; 
 
    transition: .6s ease-in-out; 
 
} 
 

 
.well.sb { 
 
    background-color: #FFF; 
 
    text-align: left; 
 
    padding: 0; 
 
    border: none; 
 
    border-bottom: 1px solid #e3e3e3; 
 
    text-decoration: none; 
 
    -moz-transition: .6s ease-in-out; 
 
    -webkit-transition: .6s ease-in-out; 
 
    -o-transition: .6s ease-in-out; 
 
    -ms-transition: .6s ease-in-out; 
 
    transition: .6s ease-in-out; 
 
} 
 

 
.article-image img { 
 
    width: 40%; 
 
    height: auto; 
 
    margin-right: 10px; 
 
    margin-top: 0px; 
 
    float:left; 
 
} 
 

 
.article-image:after{ 
 
    content: ''; 
 
    clear: both; 
 
    display:block; 
 
}

<div class="well sb"> 
 
<div> 
 
     <a href="#"> 
 
     <div class="article-image"> 
 
      <img alt="#" src="http://lorempixel.com/100/100"> 
 
      
 
      <div class="tag"> 
 
       TAG 
 
      </div> 
 
      <div class="title"> 
 
       TITLE 
 
      </div> 
 
     </div></a> 
 
    </div> 
 
</div>

次のCSSを追加します。

Answer 2

このような何か？

flexbox

.well.sb:hover { 
 
    color: #FFF; 
 
    background-color: #A10000; 
 
    text-decoration: none; 
 
    -moz-transition: .6s ease-in-out; 
 
    -webkit-transition: .6s ease-in-out; 
 
    -o-transition: .6s ease-in-out; 
 
    -ms-transition: .6s ease-in-out; 
 
    transition: .6s ease-in-out; 
 
} 
 
.well.sb:hover div { 
 
    color: #FFF; 
 
    text-decoration: none; 
 
    -moz-transition: .6s ease-in-out; 
 
    -webkit-transition: .6s ease-in-out; 
 
    -o-transition: .6s ease-in-out; 
 
    -ms-transition: .6s ease-in-out; 
 
    transition: .6s ease-in-out; 
 
} 
 
.well.sb { 
 
    background-color: #FFF; 
 
    text-align: left; 
 
    padding: 0; 
 
    border: none; 
 
    border-bottom: 1px solid #e3e3e3; 
 
    text-decoration: none; 
 
    -moz-transition: .6s ease-in-out; 
 
    -webkit-transition: .6s ease-in-out; 
 
    -o-transition: .6s ease-in-out; 
 
    -ms-transition: .6s ease-in-out; 
 
    transition: .6s ease-in-out; 
 
} 
 
.well.sb a { 
 
    display: flex; 
 
} 
 
.well.sb .article-image { 
 
    width: 40%; 
 
    margin-right: 10px; 
 
} 
 
.well.sb .article-image img { 
 
    width: 100%; 
 
    height: auto; 
 
}

<div class="well sb"> 
 
    <a href="#"> 
 
    <div class="article-image"> 
 
     <img alt="#" src="http://lorempixel.com/100/100"> 
 
    </div> 
 
    <div class="txt"> 
 
     <div class="tag"> 
 
     TAG 
 
     </div> 
 
     <div class="title"> 
 
     TITLE 
 
     </div> 
 
    </div> 
 
    </a> 
 
</div>