iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 1
1
Modern Web

初探前端之路-React-由生到死的踩地雷系列 第 1

為什麼我用:hover 滑鼠放在圖片邊緣會一直閃?

前言

大家好,我大概都是直接從問題點出發,並寫記錄我的解決方式,但不一定是最好的解決方法,所以還煩請大大提點了

問題情況

我有用 hover 讓我圖片滑過鼠標時,他會縮小transform: scale(0.95);

](http://)

 &:hover {
    transform: scale(0.95);
  }

而如果沒有多做細節當我滑鼠停在圖片邊緣時,會一直閃,會像下圖:
圖檔好像不能支援gif? 情況圖片連結

解決方式

參考來源
有幾種解決狀況

#1.加一個寫法:如下圖
需要在加:not把:hover 包進來

  &:not(:hover) {
    transform: scale(0.95);
  }
但是他的預設就變成`transform: scale(0.95)` 當鼠標滑過圖片時才會放大成原來模樣,但確實的解決當我把滑鼠放在圖片邊緣時閃爍的問題

#2. 這個其實也是從參考來源那邊的範例,只是這是我做實驗的結果:

  &:hover {
    transform: scale(0.97);
  }
  &:not(:hover) {
    transform: scale(1);
  }

就我所看到的話,預覽圖
其實還是會有閃爍的情況,但是有改變了,這時候的閃爍情況,只因為你按到了他的預設的圖片大小的邊緣,當你在邊緣左右滑動時,不停的觸動到他的:hover 所以才會縮放(閃爍)

總結

好像還可做更好,像是每個圖片再加邊框,防止圖片太過接近而造成(閃爍情況),有新的發現在補


下一篇
組件間通訊 this.state this.props refs
系列文
初探前端之路-React-由生到死的踩地雷10

尚未有邦友留言

立即登入留言