纯CSS实现鼠标悬停提示的方法

  本文实例讲述了纯CSS实现鼠标悬停提示的方法。分享给大家供大家参考。具体分析如下:

 

  这是一款比较漂亮的鼠标悬停提示效果,用纯CSS代码实现,鼠标放到图片上会显示一个层,也就是悬停时的提示,在这个提示框内你还可以加入图片或是一个列表,这就靠你的发挥了,提示框的背景颜色和文字颜色你都可以自己调。

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标悬停提示效果</title>
<style>
* {
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>
<a href="">
<img src="images/wall_s5.jpg" alt="" />
<span>欢迎经常光临!</span>
</a>
</div>
</body>
</html>

 

希望本文所述对大家的div+css网页设计有所帮助。

时间: 2024-12-21 13:21:30

纯CSS实现鼠标悬停提示的方法的相关文章

js实现动画特效的文字链接鼠标悬停提示的方法

 这篇文章主要介绍了js实现动画特效的文字链接鼠标悬停提示的方法,实例分析了javascript操作css的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了js实现动画特效的文字链接鼠标悬停提示的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD

css实现鼠标悬停时滑出层提示的方法

 本文实例讲述了css实现鼠标悬停时滑出层提示的方法.分享给大家供大家参考.具体分析如下: 这是一个简单的鼠标悬停提示特效,类似于alt标签,不过这一种是用纯CSS实现,扩展性好,而且在提示的层里可以加入图片或其它布局,这个要根据你的需要了.   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tran

oracle-Oracle BIEE技术Oracle BIEE能做鼠标悬停提示的那种效果吗?

问题描述 Oracle BIEE技术Oracle BIEE能做鼠标悬停提示的那种效果吗? 请问下各位大神,Oracle BIEE能做鼠标悬停提示的那种效果吗? 解决方案 自己来回答,请参考这篇文章http://blog.csdn.net/windfo/article/details/6222111 解决方案二: Oracle BIEE 没用过,关注一下,期待哪位大神出手 解决方案三: 估计够呛,我上次提这个问题.管理员直接给删掉了.

基于jQuery创建鼠标悬停效果的方法_jquery

本文实例讲述了基于jQuery创建鼠标悬停效果的方法.分享给大家供大家参考.具体实现方法如下: 1. 创建HTML: <ul> <li><a href="/tv"><img src="images/tv_off.gif" class="mainnav"></a></li> </ul> 2. 选择.mainnav的class: $(".mainnav&qu

CSS+js实现的一个优秀的超链接鼠标悬停提示

css|js|链接|鼠标 超链接,一般的做法是给一个title属性,这样用户的鼠标悬停在超链接上的时候,它会显示title的内容.但是,你是否厌倦了千篇一律的鼠标悬停效果呢? 当然,也有这方面很炫的代码,但是才跨浏览器方面功夫还是不够,呵呵.我遇到一个不错的css,在IE和Firefox下浏览一样的效果. 实际的效果大家可以参考:校园招聘一网打尽(http://www.xyzp.net/).http://www.xyzp.net/index.html 代码如下:/****************

一个优秀的超链接鼠标悬停提示CSS+JS

css|js|链接     超链接,一般的做法是给一个title属性,这样用户的鼠标悬停在超链接上的时候,它会显示title的内容.但是,你是否厌倦了千篇一律的鼠标悬停效果呢?       当然,也有这方面很炫的代码,但是才跨浏览器方面功夫还是不够,呵呵.我遇到一个不错的css,在IE和Firefox下浏览一样的效果.       下图是实际运行的效果: 代码如下: /******************************************************   dw_view

基于jquery实现的鼠标悬停提示案例_jquery

//这是JS里的代码MOMO.js 因为刚学封装JQUERY插件 所以就做的稍微麻烦一点,其实在前台页面直接就可以用mouseover,mouseout,mousemove三个事件就行了 (function ($) { $.fn.extend({ "titleOver": function (e) { this[0].myTitle = this[0].title; this[0].title = ""; //创建div元素 var tooltip = "

一个简单的JS鼠标悬停特效具体方法_javascript技巧

首先,需加载jquery库(略过). 其次,将下面 Javascript代码加到页面的头部:  复制代码 代码如下: <script type='text/javascript'>    jQuery(document).ready(function($){    $('a').hover(function()    {    $(this).stop().animate({'left': '5px'}, 'fast');    }, function() {    $(this).stop(

纯CSS实现鼠标放上去改变文字内容_CSS/HTML

HOME首页 NEWS新闻 ABOUT关于 CONTACT联系 照片PHOTO