div 来自 https://gourmethouse 的放大过渡。com/contact

Question

有谁知道如何在 div 悬停时放大而其他人移开的效果，如下所示：https://gourmethouse.com/contact?

Answer 1

通常这个问题是获得答案的广泛途径。不过你很幸运。我真的很想亲自尝试一下，我发现这很容易。我给你做了一个 fiddle: https://jsfiddle.net/2uvfsy1b/10/

基本上您需要做的就是使用一点 JQuery（或者 javascript，如果您更熟悉的话）将悬停元素的宽度设置为（在我的例子中是 40% ) 和所有其他元素的宽度（在我的例子中是 20%）。只要总和等于100%效果就很好

代码解释如下：

$(".enlargeHover").hover(
  function() {
    $(".enlargeHover").css("width", "20%");
    $(this).css("width", "40%");
  }
);

以上代码段是您需要的所有 JQuery 内容。它将带有 class enlargeHover 的所有元素的宽度设置为 20%，同时将您当前悬停的一个元素的宽度设置为 40%。（20% + 20% + 20% + 40% = 100%）。

<div class="enlargeHover img1">
  Lorem
</div>
<div class="enlargeHover img2">
  Ipsum
</div>
<div class="enlargeHover img3">
  Dolor
</div>
<div class="enlargeHover img4">
  Sit amet
</div>

以上代码段是使用的 html 结构。我使用相同的 class (enlargeHover) 来控制所有元素的宽度。 "img1"、"img2" 等 class 控制背景图像的元素。

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
}

.enlargeHover {
  width: 25%;
  height: 100%;
  display: inline-block;
  float: left;
  background-size: cover;
  text-align: center;
  font-size: 18px;
  color: white;
  transition: all ease .5s;
}

.enlargeHover.img1 {
  background-image: url("https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg");
}

.enlargeHover.img2 {
  background-image: url("http://www.frankieballard.com/sites/g/files/g2000005856/f/Sample-image10-highres.jpg");
}

.enlargeHover.img3 {
  background-image: url("https://www.visioncritical.com/wp-content/uploads/2014/12/BLG_Andrew-G.-River-Sample_09.13.12.png");
}

.enlargeHover.img4 {
  background-image: url("https://kbob.github.io/images/sample-4.jpg");
}

最后一部分是 css。基本上我所做的就是设置一个 25% 的固定宽度（因为 25 * 4 等于 100）和一个 css 过渡（为了平滑效果）。

就这些了。

如果您有任何问题，可以随时寻求帮助。希望能帮到你。

div 来自 https://gourmethouse 的放大过渡。com/contact

div enlargement transition from https://gourmethouse.com/contact

css

transition