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

Answer 1

这样的东西？

使用flexbox

的解决方案

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

float:left之后需要clear:both为其父级计算浮动内容的高度。添加以下css

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

＆＃13;

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

＆＃13;

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

＆＃13;

使整个部分可以浏览和点击

2 个答案: