Enlargen在悬停时具有特定类别的分部

Question

我想在HTML中创建一个分区 - 在hover上稍微大一些，并将现有分区扩展为新分区。

我想我需要使用JavaScript，因为有一个onmouseover函数。

任何人都可以指导我查找哪种信息，或者在哪里找到合适的代码结构。

我正在寻找的一个例子is here：

有一个框显示新内容，一旦将其悬停在其上。

Answer 1

.box {width:300px;height:200px;overflow:hidden;background-color:blue;}
.text{height:200px;padding:20px;margin:auto;color:white;box-sizing:border-box}
.secret-text { height:200px;margin:auto;background-color:red;}
.box:hover{height:auto}

<div class="box">
<div class="text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</div>
<div class="secret-text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</div>
</div>

我认为你不需要javascript。您可以使用display：none或父div中的特定高度和overflow：hidden来隐藏给定示例中的“awards-jobs”容器。然后在悬停父div时，分别设置display：block或height：auto。

Answer 2

不需要JavaScript，只需使用css即可完成：

.parent {
  width: 100px;
  height: 100px;
  background-color: grey;
  padding: 10px;
  -webkit-transition: all 0.5s; /* Safari */
    transition: all 0.5s;
}
.parent:hover {
  width: 120px;
  height: 120px
}

.child {
  visibility: hidden;
  }


.parent:hover .child {
  visibility: visible;
  }

<div class="parent">Content
  <div class="child">More content</div>
</div>

Answer 3

这样的东西？

fiddle

.tile {
  width: 100px;
  background: lightgrey;
  float: left;
  margin: 6px;
  border: 3px solid green;
  transition: transform .2s ease-in;
}

.tile div {
  width: 100%;
  height: 80px;
}

.tile span {
  display: none;
  width: 100%;
  height: 40px;
  background: white;
}

.tile:hover {
  transform: scale(1.125);
}

.tile:hover span {
  display: block;
}

<div class="tile">
  <div>Normal content</div>
  <span>New content</span>
</div>
<div class="tile">
  <div>Normal content</div>
  <span>New content</span>
</div>
<div class="tile">
  <div>Normal content</div>
  <span>New content</span>
</div>

Answer 4

使用jquery和css我们可以实现这个

$(".img or div ").hover(function() {    
   $(this).closest(".img").css("z-index", 1);    
   $(this).animate({ height: "200", width: "200", left: "-=55", top: "-=55" }, "fast");    
}, function() {    
   $(this).closest(".img").css("z-index", 0);    
   $(this).animate({ height: "90", width: "90", left: "+=55", top: "+=55" }, "fast");    
});

如果您需要更多信息，请尝试搜索内容，例如在鼠标悬停时展开div内容。

Answer 5

在您的示例中，使用transform: scale()来缩放框。

.box {
  width: 100%;
  min-height: 200px;

  padding: 5px;

  background: #fff;
  border: 2px solid crimson;

  // scale the box from horizontal center, and vertical top
  transform-origin: 50% 0;
  -webkit-transform-origin: 50% 0;

  // apply a transition
  transition: transform .5s ease-out;
  -webkit-transition: transform .5s ease-out;
}

.box:hover {
  z-index: 20;

  transform: scale(1.1);
  -webkit-transform: scale(1.1);
}

一个例子：https://jsfiddle.net/o5qwt01s/3/

确保将盒子放在容器内，以防止盒子在悬停时跳动。

另一种解决方案是在悬停时将盒子的宽度/高度更新为更高的值。在这种情况下，我们必须将框absolute放在它的容器中。缺点是你必须为它的容器指定一个height，以及盒子。

.col {
  position: relative;
  width: 30%;
  height :200px;

  display: inline-block;  
  vertical-align: top;

  margin: 10px;

}

.box {
  position: absolute;
  top: 0;
  width: 100%;
  height: 200px;

  padding: 5px;

  background: #fff;
  border: 2px solid crimson;

  transition: height .2s ease-out;
  -webkit-transition: height .2s ease-out;
}

.box:hover {  
  z-index: 20;
  height: 300px;
}

https://jsfiddle.net/24wrm8zo/3/