Question

我正在建立一个网站。在我的HTML文件中，我有一个显示为flexbox的div。它是一个包含7个元素的水平div（＆＃39;卡片＆＃39;带有图像和标题）。在悬停时，我希望元素增加宽度。当我这样做它可以工作，但行中的其他元素减少，以正确填充弹性行。我宁愿像他们一样传播，离开，即使屏幕走了一点。我想制作一些类似于Netflix网站上有关悬停的电影卡片。

所以这是我网站的简化（相关部分）：

＆＃13;

body {
  margin: 0;
  font-family: sans-serif;
}

.row {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.element {
  width: 12%;
  margin: 1.1428571vw;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  cursor: pointer;
  transition: all .28s;
}

.element:hover {
  width: 35%;
}

.element img {
  width: 100%;
  height: 17vw;
  margin: 0;
}

.element h1 {
  width: 100%;
  height: 35px;
  font-size: 16px;
  font-weight: lighter;
  margin: 14px 0;
}

＆＃13;

<div class="row">
  <div id="element1" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 1</h1>
  </div>
  <div id="element2" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 2</h1>
  </div>
  <div id="element3" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 3</h1>
  </div>
  <div id="element4" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 4</h1>
  </div>
  <div id="element5" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 5</h1>
  </div>
  <div id="element6" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 6</h1>
  </div>
  <div id="element7" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 7</h1>
  </div>
</div>

＆＃13;

所以也许我应该使用JavaScript来满足我的需求。我不知道我在这里有点迷失。

这是我的目标：
当你把鼠标放在一个元素上时，我想增加很多宽度，一点高度，模糊图像并在模糊图像上显示一些文字（h1，h2和p）。

我真的需要一个方向来实现这一切。非常感谢你的帮助。

Answer 1

要防止收缩，只需将flex-shrink:0添加到.element：

＆＃13;

body {
  margin: 0;
  font-family: sans-serif;
}

.row {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.element {
  width: 12%;
  margin: 1.1428571vw;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  cursor: pointer;
  transition: all .28s;
  flex-shrink:0; /* <------ Add this */
}

.element:hover {
  width: 35%;
}

.element img {
  width: 100%;
  height: 17vw;
  margin: 0;
}

.element h1 {
  width: 100%;
  height: 35px;
  font-size: 16px;
  font-weight: lighter;
  margin: 14px 0;
}

＆＃13;

<div class="row">
  <div id="element1" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 1</h1>
  </div>
  <div id="element2" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 2</h1>
  </div>
  <div id="element3" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 3</h1>
  </div>
  <div id="element4" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 4</h1>
  </div>
  <div id="element5" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 5</h1>
  </div>
  <div id="element6" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 6</h1>
  </div>
  <div id="element7" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 7</h1>
  </div>
</div>

＆＃13;

更改宽度而不更改flex中的其他元素

1 个答案: