`

css鼠标放上去则显示电话号码

CSSHTMLXHTMLXMLBlog 
阅读更多

。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" /><title>comasp's blog</title>
<style type="text/css">
a{
color: #FFFF99;
text-decoration: none;
}a:hover{
color: #FFFFFF;
text-decoration: underline;
}

#nav{
padding: 10px 10px 0;
font-size: 12px;
font-weight: bold;
margin: 1em 0 0;
list-style:none;
}.bi{
position: relative;
z-index: 0;
}.bi:hover{
z-index: 99;
}.bi:hover span{
visibility: visible;
top: 0;
left: 0;
cursor: pointer;
}.bi span{
position: absolute;
left: -999em;
visibility: hidden;
}#nav li a,.bi:hover span{
line-height: 20px;
text-decoration: none;
background: #DDDDDD;
color: #666666;
display: block;
width: 80px;
text-align: center;
}#nav li a:hover,.bi:hover span{
color: #FFFFFF;
background: #DC4E1B;
}.bi:hover span{
padding-top: 2px;
}
</style>
</head>
<body>
<ul id="nav">
<li><a class="bi" href="index.html">张三<span>13011111111</span></a></li>
<li><a class="bi" href="about.html">李四<span>13022222222</span></a></li>
<li><a class="bi" href="products.html">王五<span>13033333333</span></a></li>
<li><a class="bi" href="services.html">赵六<span>13044444444</span></a></li>
<li><a class="bi" href="contact.html">什么七去了<span>13055555555</span></a></li>
</ul>
</body>
</html>

分享到：
| 一个导航条的效果DIV+CSS
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    一点小小的创意css鼠标放上去则显示电话号码

    ### 一点小小的创意CSS：鼠标放上去则显示电话号码 #### 概述 本文将详细介绍一个有趣且实用的CSS技巧——当鼠标悬停在特定元素上时，显示隐藏的电话号码。这一效果不仅可以用于个人博客或网站增添互动性，还可以...

    CSS鼠标移上去显示大图

    在本案例中，“CSS鼠标移上去显示大图”是指通过CSS实现了一个交互效果：当鼠标悬停在小图片上时，会显示一个放大版的大图。这种功能常见于产品展示、相册浏览等场景，可以提升用户体验，让用户更清晰地查看细节。 ...

    CSS 省略号 完美解决 鼠标放上显示不能看部分的内容

    CSS 省略号 完美解决 鼠标放上显示不能看部分的内容

    完美的鼠标放上去jquery显示隐藏层

    在网页设计和开发中，交互性是提升用户体验的关键因素之一，而“完美的鼠标放上去jquery显示隐藏层”正是实现这种交互效果的一种技术手段。这个标题所指的是一种使用JavaScript库jQuery来实现在鼠标悬停（hover）时...

    鼠标放上去显示div

    总的来说，"鼠标放上去显示div"是一个实用的网页交互功能，通过结合HTML、CSS和JavaScript，我们可以创造出丰富的用户体验。同时，这也涉及到前端开发的基础知识，包括DOM操作、事件监听以及CSS样式控制。理解并掌握...

    CSS3实现鼠标移动到DIV上高亮显示特效

    本示例中，我们将探讨如何利用CSS3来实现一个动态特效：当鼠标悬停在DIV元素上时，特定部分高亮显示，而其余部分则变灰暗。这个效果可以增强用户界面的互动性和吸引力，帮助用户更好地聚焦于关键信息。 首先，我们...

    纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存

    在这个特定的主题中，“纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存”是指通过CSS实现的一种交互效果：当鼠标悬停在一个div上时，另一个关联的div会显示出来，同时其他无关的div保持隐藏状态。这种效果在创建导航...

    CSS3实现鼠标悬停图片显示文字动画特效.zip

    &lt;/head&gt; &lt;body&gt;[removed][removed]   ... &lt;h2 class="animate-text"&gt;More lorem ipsum bacon ... 这是一款好看的鼠标移动到图片上面的时候滑动显示出标题文字信息的CSS3鼠标悬停图片显示文字动画特效。

    纯css鼠标经过列表高亮显示

    在网页设计中，"纯CSS鼠标经过列表高亮显示"是一种常见的交互效果，它使得用户在鼠标悬停在列表项上时，该列表项能够突出显示，提高用户体验和交互性。这种效果通常应用于导航菜单、文章列表或者任何需要强调当前...

    div+css实现鼠标放上去，背景跟图片都会变化。

    New Document ul{ list-style:none; } a{ padding-left:1.5em;font-size:12px;height:23px;line-height:23px;color:gray;text-decoration:none;... background:url(/article/upimages/bbs_bg_off.gif);...

    鼠标放上去显示大图片的两种方式

    这种效果可以通过多种技术实现，而"鼠标放上去显示大图"的两种常见方法主要依赖于CSS（层叠样式表）和JavaScript。下面我们将详细探讨这两种方法及其实现过程。 **方法一：纯CSS实现** CSS3提供了`:hover`伪类选择...

    产品排列鼠标放上去边框变色

    在网页设计中，"产品排列鼠标放上去边框变色"是一种常见的交互设计技巧，用于提升用户体验和增强视觉效果。这种技术通常通过CSS（层叠样式表）来实现，当用户将鼠标指针悬停在产品图片或按钮等元素上时，元素的边框...

    css3鼠标悬停动画

    这个伪类在鼠标悬停时触发，移开鼠标后则恢复原样。例如，我们可以为一个按钮设置:hover状态，当鼠标悬停在按钮上时，改变其背景颜色或边框效果： ```css .button { background-color: #333; color: white; } ....

    网页特效js效果,鼠标放上去就知道不一样的效果

    "鼠标放上去就知道不一样的效果"这句话描述的是一种常见的交互式网页特效，通常称为悬停效果或mouseover事件。 悬停效果主要依赖于JavaScript与HTML、CSS的协同工作。当用户将鼠标指针移动到页面元素上时，...

    CSS鼠标经过图片显示详细信息jquery特效

    本项目“CSS鼠标经过图片显示详细信息jquery特效”就是这种技术应用的一个实例，它利用CSS样式和jQuery库来增强用户体验，当用户将鼠标悬停在图片上时，会显示与图片相关的详细信息。 首先，CSS在其中起着样式控制...

    CSS3鼠标经过显示二维码和二级菜单特效.zip

    &lt;!... &lt;... &lt;head&gt; ...meta charset="UTF-8"&gt;...CSS3 JS鼠标经过显示二维码和二级菜单特效&lt;... 这是一款比较简单实用的基于CSS3实现的鼠标经过显示二维码和二级菜单特效，CSS3鼠标悬停事件代码。

    jquery 鼠标放上去后出现的提示效果

    综上所述，实现“jquery 鼠标放上去后出现的提示效果”涉及到的知识点包括jQuery的选择器、事件处理、DOM操作和CSS样式应用。具体实现时，开发者需要结合项目需求进行调整和优化。压缩包中的 `201012` 和 `js` 文件...

    jQuery+CSS实现图片感应鼠标高亮显示当前图片

    在网页设计中，提升用户体验是至关重要的，而“jQuery+CSS实现图片感应鼠标高亮显示当前图片”就是一种常见的交互式设计技术。这种技术可以使用户更容易聚焦于当前操作的图片，增强视觉效果，同时提供更直观的操作...

    CSS自定义鼠标显示的形状

    CSS自定义鼠标显示的形状，CSS自定义鼠标显示的形状

    css鼠标移上去变手样式

    当我们希望鼠标悬停在某个元素（如链接）上时显示为手形指针，可以利用CSS中的`cursor`属性来轻松达成这一效果。以下将对这一知识点进行详细介绍： ### CSS中的`cursor`属性 `cursor`属性用于定义鼠标指针形状。在...

Magicbox
Global site tag (gtag.js) - Google Analytics