使整个部分可悬停和可点击答案

【问题标题】：Make whole part hoverable and clickable使整个部分可悬停和可点击
【发布时间】：2017-01-02 23:32:26
【问题描述】：

当您将鼠标悬停在图像上时，图像和文本所在的部分都是可点击的。文本部分也突出显示红色，这很棒。当您将鼠标悬停在文本上时，文本背景区域也会变为红色，并且文本部分和图像部分是可点击的。我想要的是，当您将鼠标悬停在图像上时，文本区域的整个部分和文本区域下方的白色区域是可悬停/可点击的（因此图像旁边的白色部分，具有图像的全高和文本区域的全宽）。是否有可能使整个矩形块可悬停/可点击（而不仅仅是那个文本区域块）？

.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;
}

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

【问题讨论】：

标签： html css

【解决方案1】：

这样的？

使用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>

【讨论】：

【解决方案2】：

float:left 后面需要跟一个clear:both 以供其父级计算浮动内容的高度。添加以下css

.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 {
	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;
}

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

【讨论】：