javascript - 如何在鼠标悬停时在其他内容之上放大 div 以减少滚动溢出内容的需要？我正在使用 Angular 2/4

标签 javascript css angular animation

我有 9 个 div，它们是盒子。每个框都包含不适合框本身的数据(在我的示例中使用了一些文本，一遍又一遍地重复)。当我将鼠标悬停在任何框的顶部时，我希望该框“放大并能够与其他框重叠”，以便我无需滚动即可查看更多信息。动画是一个加号。什么是完成此任务的好方法？它是指令还是其他？以下是我在 vanilla html/css 中的代码。

我之前看的图片:

enter image description here

鼠标悬停后的结果图片以进行动画处理。请注意，未显示的是框更大(由于尺寸更大)，它显示更多可能有助于消除滚动的文本内容:

enter image description here 

html,body {
  width:100%;
  height:100%;
}
table {
  border:1;
  width:100%;
  height:100%;

}
td {
  text-align:center;
  background:red;
  padding:  10px 0;
}

.scroll {
  overflow-y: auto;
  height: 100%;  
  background:yellow;
}

.heading{
  height:20px;
}
<table>
  <tr>
    <td>
      
        <span class="heading">Box1</span>
        <div class="scroll">
        Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>
        </div>
     
    </td>
    <td>
      <span class="heading">Box2</span>
      <div class="scroll">
        Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>
      </div>
    </td>
    <td>
      
       <span class="heading">Box2</span>
         <div class="scroll">Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>
      </div>
      
    </td>
  </tr>
  <tr>
    <td>
      
       <span class="heading">Box4</span>
         <div class="scroll">Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>
      </div>
      
    </td>
    <td>
      
       <span class="heading">Box5</span>
         <div class="scroll">Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>
      </div>
      
    </td>
    <td>
      
       <span class="heading">Box6</span>
         <div class="scroll">Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>
      </div>
      
    </td>
  </tr>
  <tr>
    <td>
      
       <span class="heading">Box7</span>
         <div class="scroll">Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>
      </div>
      
    </td>
    <td>
      
       <span class="heading">Box8</span>
         <div class="scroll">Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>
      </div>
      
    </td>
    <td>
      
       <span class="heading">Box9</span>
         <div class="scroll">Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>
      </div>
      
    </td>
  </tr>
</table>

最佳答案

我在单元格和标题/框之间添加了一个额外的包装器，以使其仅与 CSS 一起工作(没有也可以这样做，但是如何处理缩放、过渡等会变得更加复杂)。

因为当放大时，它覆盖了离它最近的单元格，我在过渡上添加了一个延迟，所以人们有时间将光标重新定位在选择框上。另一种选择是将它缩小一点，但我试过了，但看起来不太好，所以我选择了延迟版本。

这会是您可以使用的东西吗？

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}
* {
position: relative;
  box-sizing: border-box;
}
table {
  border: 1;
  width: 100%;
  height: 100%;
}
tr {
  height: 33.333%
}
td {
  position: relative;
  text-align: center;
  background: red;
  padding: 10px 0;
  height: 33.333%
}
td > div {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: red;
}
.scroll {
  overflow-y: auto;
  height: calc(100% - 20px);
  background: yellow;
}
.heading {
  display: block;
  height: 20px;
}

tr:nth-child(1) td:nth-child(1) > div {
  transform-origin: left top;
}
tr:nth-child(1) td:nth-child(2) > div {
  transform-origin: center top;
}
tr:nth-child(1) td:nth-child(3) > div {
  transform-origin: right top;
}
tr:nth-child(2) td:nth-child(1) > div {
  transform-origin: left center;
}
tr:nth-child(2) td:nth-child(2) > div {
  transform-origin: center center;
}
tr:nth-child(2) td:nth-child(3) > div {
  transform-origin: right center;
}
tr:nth-child(3) td:nth-child(1) > div {
  transform-origin: left bottom;
}
tr:nth-child(3) td:nth-child(2) > div {
  transform-origin: center bottom;
}
tr:nth-child(3) td:nth-child(3) > div {
  transform-origin: right bottom;
}

td:hover {
  z-index: 1;
}
td > div {
  transition: transform .5s;
}
td:hover > div {
  transform: scale(2);
  transition: transform .5s .5s;
}
td:hover > div * {
  transform: scale(0.5);
  transform-origin: left top;
  width: 200%;
}
td:hover > div span {
  height: 10px;
}
td:hover > div div {
  height: calc(200% - 10px);
}
<table>
  <tr>
    <td>
      <div>
        <span class="heading">Box1</span>
        <div class="scroll">
          Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>
        </div>
      </div>

    </td>
    <td>
      <div>
        <span class="heading">Box2</span>
        <div class="scroll">
          Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>
        </div>
      </div>
    </td>
    <td>
      <div>

        <span class="heading">Box3</span>
        <div class="scroll">Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>
        </div>
      </div>

    </td>
  </tr>
  <tr>
    <td>
      <div>

        <span class="heading">Box4</span>
        <div class="scroll">Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>
        </div>
      </div>

    </td>
    <td>
      <div>

        <span class="heading">Box5</span>
        <div class="scroll">Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>
        </div>
      </div>

    </td>
    <td>
      <div>

        <span class="heading">Box6</span>
        <div class="scroll">Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>
        </div>
      </div>

    </td>
  </tr>
  <tr>
    <td>
      <div>

        <span class="heading">Box7</span>
        <div class="scroll">Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>
        </div>
      </div>

    </td>
    <td>
      <div>

        <span class="heading">Box8</span>
        <div class="scroll">Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>
        </div>

      </div>
    </td>
    <td>

      <div>
        <span class="heading">Box9</span>
        <div class="scroll">Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>
        </div>
      </div>

    </td>
  </tr>
</table>

根据评论，这里尝试使文本在放大之前不收缩。

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}
* {
position: relative;
  box-sizing: border-box;
}
table {
  border: 1;
  width: 100%;
  height: 100%;
}
tr {
  height: 33.333%
}
td {
  position: relative;
  text-align: center;
  background: red;
  padding: 10px 0;
  height: 33.333%
}
td > div {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: red;
}
.scroll {
  overflow-y: auto;
  height: calc(100% - 20px);
  background: yellow;
}
.heading {
  display: block;
  height: 20px;
}

tr:nth-child(1) td:nth-child(1) > div {
  transform-origin: left top;
}
tr:nth-child(1) td:nth-child(2) > div {
  transform-origin: center top;
}
tr:nth-child(1) td:nth-child(3) > div {
  transform-origin: right top;
}
tr:nth-child(2) td:nth-child(1) > div {
  transform-origin: left center;
}
tr:nth-child(2) td:nth-child(2) > div {
  transform-origin: center center;
}
tr:nth-child(2) td:nth-child(3) > div {
  transform-origin: right center;
}
tr:nth-child(3) td:nth-child(1) > div {
  transform-origin: left bottom;
}
tr:nth-child(3) td:nth-child(2) > div {
  transform-origin: center bottom;
}
tr:nth-child(3) td:nth-child(3) > div {
  transform-origin: right bottom;
}

td:hover {
  z-index: 1;
}
td > div {
  transition: transform .5s;
}
td > div * {
  width: 100%;  
}
td:hover > div {
  transform: scale(2);
  transition: transform .5s .5s;
}
td:hover > div * {
  transform: scale(0.5);
  transform-origin: left top;
  width: 200%;
  transition: transform 0s .5s, width 0s .5s, height 0s .5s;
}
td:hover > div span {
  height: 10px;
  color: white;
}
td:hover > div div {
  height: calc(200% - 10px);
}
<table>
  <tr>
    <td>
      <div>
        <span class="heading">Box1</span>
        <div class="scroll">
          Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>
        </div>
      </div>

    </td>
    <td>
      <div>
        <span class="heading">Box2</span>
        <div class="scroll">
          Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>
        </div>
      </div>
    </td>
    <td>
      <div>

        <span class="heading">Box3</span>
        <div class="scroll">Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>
        </div>
      </div>

    </td>
  </tr>
  <tr>
    <td>
      <div>

        <span class="heading">Box4</span>
        <div class="scroll">Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>
        </div>
      </div>

    </td>
    <td>
      <div>

        <span class="heading">Box5</span>
        <div class="scroll">Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>
        </div>
      </div>

    </td>
    <td>
      <div>

        <span class="heading">Box6</span>
        <div class="scroll">Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>
        </div>
      </div>

    </td>
  </tr>
  <tr>
    <td>
      <div>

        <span class="heading">Box7</span>
        <div class="scroll">Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>
        </div>
      </div>

    </td>
    <td>
      <div>

        <span class="heading">Box8</span>
        <div class="scroll">Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>
        </div>

      </div>
    </td>
    <td>

      <div>
        <span class="heading">Box9</span>
        <div class="scroll">Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>
        </div>
      </div>

    </td>
  </tr>
</table>

根据第二条评论，还可以添加基于类的 CSS 规则，然后通过切换单元格上的相同类，手动触发动画。

这是 CSS 规则的更新以实现这一点

td.zoomin > div,
td:hover > div {
  transform: scale(2);
  transition: transform .5s .5s;
}
td.zoomin > div *,
td:hover > div * {
  transform: scale(0.5);
  transform-origin: left top;
  width: 200%;
  transition: transform 0s .5s, width 0s .5s, height 0s .5s;
}
td.zoomin > div span,
td:hover > div span {
  height: 10px;
  color: white;
}
td.zoomin > div div,
td:hover > div div {
  height: calc(200% - 10px);
}

还有类似这样的脚本

var box = document.querySelector("td:nth-child(2)");
box.classList.add("zoomin");

关于javascript - 如何在鼠标悬停时在其他内容之上放大 div 以减少滚动溢出内容的需要？我正在使用 Angular 2/4，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44422936/

上一篇：css - 在导航栏 Bootstrap 顶部添加文本的正确方法

下一篇：javascript - 单击时禁用鼠标悬停

相关文章：

javascript - 对 JavaScript 原型(prototype)继承感到困惑

c# - 如何过滤 dxChart 数据

javascript - svg元素的自下而上的CSS动画

从 : npm i angular-star-rating 开始的 Angular 星级

angular - Angular 6 中的输入验证无法收到错误

angular - < spy > : could not find an object to spy upon

javascript - 从 BxSlider 中移除幻灯片

javascript - 查找没有 ID 的元素

css - 在wordpress中更改顶部菜单颜色

html - 让一个类(class)出现在另一个类(class)悬停上

©2024 IT工具网  联系我们