標籤：lock display 偽類 isp block contain one 圖片 遮罩
馬上月底了, 這個月忙於工作和生活, 沒有很好的寫一篇部落格, 有點憂傷. 為了彌補, 就寫點簡單的.
最近項目有個需求, 就是滑鼠移入的時候顯示一個層, 移除的時候這個層消失. 當然層是可以點擊進行額外操作的.
項目用的是react,最開始使用的是mounseenter和mounseleave事件, 結果吧出現了點擊進入另外一個路由後,再次點擊回來後, 滑鼠在元素上, 確沒有再出現浮層. 這就有尷尬了.
當時還想用的是事件, 但想想現在css3滑鼠事件, 動畫, 偽類別選取器這麼成熟了. 額外去搜素瞭解了一下, 自己似乎以前看到過相關文章.
後來發現hover這個偽類 確實可以是比較帥. 當然只能控制子項目(大家這麼說, 我等有時間還是好好琢磨琢磨).
基本實現蒙層, 就是蒙層設定為絕對位置, 預設是隱藏, hover的時候,顯示出來,基本就是這樣. mounseenter和mounseleave的防範, 你很快的移動的時候, 總是會有點莫名的問題出來. 這個簡直就是救星一個了.
代碼基本結構就是如此了.
<style type="text/css"> .container{ width:400px;height:200px; background-color: blueviolet } .layer{ background-color:#8bb907; display:none; height: 100%; width: 100%; text-align: center; } .container:hover .layer{display:block;}</style><body> <div class="container"> <div class="layer"> <a href="http://www.baidu.com">百度</a> </div> </div> </body>另外一個就是img預設圖片載入失敗的問題, 我開始很自信的寫下了
<img src={item.src|| ‘http://xxxxxx.png‘} alt="美女圖片"/>結果你會發現, src地址不正確或者載入失敗的時候就愣是尷尬了, 怎麼辦,
如下就是更好的方案,如果載入失敗,就顯示預設的.
<img src={item.src} alt="美女圖片" onError={ev=>ev.target.src= "htpp://xxxxx.png"} />有人說, 哦, 如此啊, 其實還沒完. 如果你的預設圖片失敗了怎麼辦, 是不是一直在重複載入呢. 哈哈, 明白了吧.
css hover遮罩層
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
