點擊圖片跳轉 css 樣式是網頁設計中常見的效果,通過點擊圖片可以使頁面跳轉到另一個鏈接或者展示出某些效果,這樣可以讓用戶在頁面中更快速地找到所需的信息。通過以下代碼可以輕松實現。
<style> .img-link { border: none; } .img-link:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0.8; } .img-link:hover { text-decoration: none; } </style> <a href="鏈接地址" target="_blank" class="img-link"> <img src="圖片地址" alt="圖片" width="250" height="250"> </a>
上面的代碼中,首先定義了一個 class 名稱為 img-link,它包含三個 css 樣式定義:
- border: none;表示鏈接沒有邊框;
- .img-link:hover img 表示當鏈接被鼠標懸停時,圖片會變大 10% 并且透明度變為 80%;
- .img-link:hover 表示當鏈接被鼠標懸停時,不顯示下劃線。
接下來,在 HTML 中,我們定義了一個帶有 .img-link class 的鏈接,該鏈接包含一張圖片。當用戶將鼠標懸停在該鏈接上時,圖片變大并且透明度變為 80%,同時不顯示下劃線。當用戶點擊圖片時,鏈接中的 URL 會打開一個新的頁面。
使用該方法可以讓你在你的頁面中添加一個帶有動態效果的鏈接圖片,使你的頁面看起來更加生動和吸引人。
上一篇點擊小圖變大 css
下一篇mysql中的關系運算符