基于HTML/CSS+MDL实现悬停显示描述的卡片技术求助

嘿，我来帮你搞定这两个MDL卡片的问题！咱们一个个来解决：

要实现“非悬停隐藏、悬停显示”的div，关键是利用CSS的:hover伪类来控制元素的显示状态。步骤如下：

1. 在你的.mdl-card里添加描述div，比如放在标题下方，给它加个自定义类（比如card-description）
2. 默认给这个div设置display: none;隐藏它
3. 当父元素.mdl-cell被hover时，让这个div显示出来

修改后的关键代码片段：

HTML 调整：

<div class="project mdl-cell mdl-cell--4-col mdl-card mdl-shadow--4dp">
  <div class="mdl-card__media" id="nyc"></div>
  <div class="mdl-card__title">
    <h2 class="mdl-card__title-text">New York City</h2>
  </div>
  <!-- 新增的描述div -->
  <div class="card-description mdl-card__supporting-text">
    这里是纽约的描述内容，悬停时才会显示哦！
  </div>
</div>

CSS 新增：

.card-description {
  display: none;
  padding: 16px;
  background-color: #fff;
}

.mdl-cell:hover .card-description {
  display: block;
}

这样就只有当鼠标悬停在卡片上时，描述div才会出现，平时是隐藏状态。

你之前用flex-grow来控制.mdl-card__media的高度变化，但flex布局下可能会连带影响宽度。咱们换一种思路，用max-height来实现高度的过渡动画，同时固定media的宽度，这样图片背景就不会缩小了：

修改后的.mdl-card__media CSS：

.mdl-card__media {
    box-sizing: border-box;
    background-size: cover;
    background-position: center; /* 确保图片始终居中显示 */
    padding: 0 24px 0 24px;
    display: flex;
    width: 100%; /* 固定宽度为100% */
    max-height: 200px; /* 默认的最大高度 */
    flex-direction: row;
    align-items: flex-end;
    cursor: pointer;
    transition: max-height 0.25s cubic-bezier(0.4, 0.0, 1, 1);
}

.mdl-cell:hover .mdl-card__media, .mdl-cell.hover .mdl-card__media {
    max-height: 80px; /* 悬停时的高度 */
    transition: max-height 0.25s cubic-bezier(0.0, 0.0, 0.2, 1);
}

这里把flex-grow替换成max-height来控制高度变化，同时设置width: 100%确保media的宽度始终占满卡片，background-position: center能让图片在高度变化时保持居中显示，不会出现偏移。

CSS：

.mdl-card{ height: auto; /* 改成auto让卡片自适应内容高度 */ }
.mdl-card__media {
    box-sizing: border-box;
    background-size: cover;
    background-position: center;
    padding: 0 24px 0 24px;
    display: flex;
    width: 100%;
    max-height: 200px;
    flex-direction: row;
    align-items: flex-end;
    cursor: pointer;
    transition: max-height 0.25s cubic-bezier(0.4, 0.0, 1, 1);
}
.mdl-cell:hover .mdl-card__media, .mdl-cell.hover .mdl-card__media {
    max-height: 80px;
    transition: max-height 0.25s cubic-bezier(0.0, 0.0, 0.2, 1);
}
#nyc{ background-image: url('http://com.postmates.img.prod.s3.amazonaws.com/9fcb0858-0759-4e78-874b-bdcc2a048181/orig.jpg'); }
#hkg{ background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Hong_Kong_Island_Skyline_2009.jpg/1200px-Hong_Kong_Island_Skyline_2009.jpg'); }
.card-description {
  display: none;
  padding: 16px;
  background-color: #fff;
}
.mdl-cell:hover .card-description {
  display: block;
}

HTML：

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:200,300,400,500,700" type="text/css">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue_grey-blue.min.css" />
<div class="project-holder mdl-grid">
  <div class="project mdl-cell mdl-cell--4-col mdl-card mdl-shadow--4dp">
    <div class="mdl-card__media" id="nyc"></div>
    <div class="mdl-card__title">
      <h2 class="mdl-card__title-text">New York City</h2>
    </div>
    <div class="card-description mdl-card__supporting-text">
      纽约是美国最大的城市，拥有标志性的自由女神像和时代广场。
    </div>
  </div>
  <div class="project mdl-cell mdl-cell--4-col mdl-card mdl-shadow--4dp">
    <div class="mdl-card__media" id="hkg"></div>
    <div class="mdl-card__title">
      <h2 class="mdl-card__title-text">Hong Kong</h2>
    </div>
    <div class="card-description mdl-card__supporting-text">
      香港是一个充满活力的国际大都市，以摩天大楼和美食闻名。
    </div>
  </div>
</div>

这样调整后，两个问题都能解决：描述div只在悬停时显示，图片区域的宽度也不会在动画时缩小啦！

内容的提问来源于stack exchange，提问作者quantumbutterfly