生活随笔
收集整理的這篇文章主要介紹了
web-前端设计之鼠标悬停样式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這里展示的是鼠標懸停時的邊框的樣式，以及里面的字體樣式
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>.demo{border: 1px solid #ffffff;width: 100px;height: 100px;text-align: center;float: left;}.icon{width: 60px;height: 56px;background: url(img/tb01.png) no-repeat;margin: 10px auto;}.demo:hover{border: 1px solid red;cursor: pointer;}.demo:hover .icon{background: url(img/tb02.png) no-repeat;}.demo:hover .font{color: red;}</style></head><body><div class="demo"><div class="icon"></div><div class="font">文本內容
</div></div><div class="demo"><div class="icon"></div><div class="font">文本內容
</div></div><div class="demo"><div class="icon"></div><div class="font">文本內容
</div></div><div class="demo"><div class="icon"></div><div class="font">文本內容
</div></div></body>
</html>
總結
以上是生活随笔為你收集整理的web-前端设计之鼠标悬停样式的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
