css hover遮罩層
阿新 • • 發佈：2018-09-01
align 圖片 tex img 自己 工作 container 憂傷 了解
馬上月底了, 這個月忙於工作和生活, 沒有很好的寫一篇博客, 有點憂傷. 為了彌補, 就寫點簡單的.
最近項目有個需求, 就是鼠標移入的時候顯示一個層, 移除的時候這個層消失. 當然層是可以點擊進行額外操作的.
項目用的是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遮罩層