兄弟連教育分享：用CSS實現鼠標懸停提示的方法

時間 2019-12-13

標籤兄弟教育分享 css 實現鼠標懸停提示方法欄目 CSS 简体版

原文原文鏈接

兄弟連教育分享：用CSS實現鼠標懸停提示的方法html

本文，兄弟連HTML5培訓，分享了純CSS實現鼠標懸停提示的方法。給你們供你們參考。具體分析以下：ui

這是一款比較漂亮的鼠標懸停提示效果，用純CSS代碼實現，鼠標放到圖片上會顯示一個層，也就是懸停時的提示，在這個提示框內你還能夠加入圖片或是一個列表，這就靠你的發揮了，提示框的背景顏色和文字顏色你均可以本身調。spa

代碼以下:xml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">htm

<html xmlns="http://www.w3.org/1999/xhtml">圖片

<head>utf-8

<title>鼠標懸停提示效果</title>io

<style>meta

* {

margin:0;

padding:0;

}

div {

margin:130px;

list-style:none;

}

div img {

border:0;

}

div a {

color:#fff;

text-decoration:none;

position:relative;

display:block;

}

div span {

font-size:12px;

display:none;

}

div a:hover {

background:;

}

div a:hover span {

padding:3px;

background:skyblue;

color:#fff;

font-size:9pt;

border-width:1px 2px 2px 1px;

border-color:#333;

border-style:solid;

position:absolute;

top:-30px;

left:0;

display:block;

}

</style>

</head>

<body>

<div>

<span>歡迎常常光臨！</span>

</a>

</div>

</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。