Question

我正在尝试制作显示鼠标悬停时的说明卡片。到目前为止我已经做到了这一点：https://jsfiddle.net/L0xsug1o/。该代码也被添加到帖子的末尾

我坚持了两件事：

如何将鼠标添加到鼠标悬停时显示的空格中，以便在未被鼠标悬停时隐藏？当鼠标没有在卡上时，我可以看到我尝试的任何内容。
如何使图像的宽度不会随着它们的动画效果而减小？

这些问题在某种程度上是相关的，因为它们都涉及创建可以滑入和滑出视图的div。

我正在使用Google的Material Design Lite前端框架

任何帮助或指导都将不胜感激

CSS：

.mdl-card{
    height: 275px;
}

.mdl-card__media {

  box-sizing: border-box;
  background-size: cover;
  padding: 0 24px 0 24px;
  display: flex;
  flex-grow: 1;
  flex-direction: row;
  align-items: flex-end;
  cursor: pointer;
  -webkit-transition: flex-grow 0.25s;
  transition: flex-grow 0.25s;
  transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1);;

}

.mdl-cell:hover .mdl-card__media, .mdl-cell.hover .mdl-card__media {
    -webkit-transition: flex-grow 0.3s; /* Safari */
    transition: flex-grow 0.25s;
    transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
    flex-grow: 0;
}

#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');
}

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>

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

Answer 1

我坚持了两件事：



如何为鼠标时出现的空白区域添加div   结束了，当你没有被淹没时它被隐藏了？我还有什么   当鼠标未在卡上时，尝试可见。



如何使图像的宽度在动画时不会减小   出？

您可以使用文字为div的max-height设置动画。
这可以使用background-size属性来解决，但请记住，图像的宽高比是此问题中最重要的部分。因此我建议使用具有相同宽高比的图像来轻松处理它们。

.mdl-card {
  height: 275px;
}

.project .mdl-card__supporting-text {
  max-height: 0px;
  padding: 0 16px;
  -webkit-transition: max-height 0.25s;
  transition: max-height 0.25s;
  transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1);
}

.mdl-cell:hover .mdl-card__supporting-text {
  max-height: 300px;
}

.mdl-card__media {
  box-sizing: border-box;
  background-size: cover;
  padding: 0 24px 0 24px;
  display: flex;
  flex-grow: 1;
  flex-direction: row;
  align-items: flex-end;
  cursor: pointer;
  -webkit-transition: flex-grow 0.25s;
  transition: flex-grow 0.25s;
  transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1);
}

.mdl-cell:hover .mdl-card__media,
.mdl-cell.hover .mdl-card__media {
  flex-grow: 0;
}

#nyc {
  background-size: 220% auto;
  background-image: url(https://www.newyorksocialnetwork.com/wp-content/gallery/welcome/nyc-skyline_web.jpg);
}

#hkg {
  background-size: 100% auto;
  background-image: url(https://news.efinancialcareers.com/wp-content/uploads/2014/11/HK2.jpg);
}

<link href="https://code.getmdl.io/1.3.0/material.blue_grey-blue.min.css" rel="stylesheet" />

<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="mdl-card__supporting-text">
      Hong Kong, officially the Hong Kong Special Administrative Region of the People's Republic of China, is an autonomous territory on the eastern side of the Pearl River estuary in East Asia, south of the mainland Chinese province of Guangdong, and east
      of the former Portuguese colony and fellow special administrative region of Macau.
    </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="mdl-card__supporting-text">
      Hong Kong, officially the Hong Kong Special Administrative Region of the People's Republic of China, is an autonomous territory on the eastern side of the Pearl River estuary in East Asia, south of the mainland Chinese province of Guangdong, and east
      of the former Portuguese colony and fellow special administrative region of Macau.
    </div>
  </div>
</div>

创建卡片时出现问题，当鼠标悬停在HTML / CSS上时显示说明

1 个答案: