如何在鼠標懸停的其他內容上放大div以減少滾動溢出內容的需求？我正在使用Angular 2/4

-1

我有9個div是盒子。每個盒子都包含數據（在我的示例中一次又一次地重複使用某些文本），這些數據不適合盒子本身。當我將鼠標懸停在任何方框的頂部時，我希望該方框「放大並可以重疊其他方框」，這樣我就可以看到更多信息而無需滾動。動畫是一個優點。什麼是實現這個目標的好方法？這是一個指令還是別的嗎？以下是我在香草html/css中的代碼。如何在鼠標懸停的其他內容上放大div以減少滾動溢出內容的需求？我正在使用Angular 2/4

圖片的什麼，我期待在之前：

圖片結果的鼠標懸停後到動畫。需要注意的是什麼是不顯示的是盒子較大（由於大尺寸），這顯示更多的文字內容，可以幫助消除滾動：

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>

來源

2017-06-07 Rolando

我加在單元格和標題/框之間添加一個額外的包裝，以使其僅與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");

來源

2017-06-07 22:40:55 LGSon

這是非常好的。有沒有一種方法可以使文本在縮小之前不會縮小？ – Rolando

@Rolando謝謝...更新了第二個示例。懸停標題文本爲白色，因此會有某種跡象顯示正在發生。 – LGSon

這是完美的！只是好奇，可能有某種方式可以說，添加一個外部按鈕，手動觸發特定框的動畫？（即方框2） – Rolando

如何在鼠標懸停的其他內容上放大div以減少滾動溢出內容的需求？我正在使用Angular 2/4

回答

相關問題