兄弟连教育分享：用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>