分享一个CSS,可以实现很棒的提示效果

本文分享了一段CSS代码,能够实现独特的电动阀门提示效果。通过简单的样式调整,当鼠标悬停在带有标题属性的链接上时,会显示一个带有阴影和渐变背景的提示框。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

分享一个CSS,觉得还不错,希望有CSS兴趣和爱好的人喜欢,可以实现很棒的提示电动阀门效果,其他人可以飘过---呵呵

01
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02
<html xmlns="http://www.w3.org/1999/xhtml">
03
<head>
04
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05
<title>测试电动阀门 - 麦子编程博客</title>
06
<style>
07
a {
08
   color: #900;
09
   text-decoration: none;
10
 }
11
    
12
 a:hover {
13
   color: red;
14
   position: relative;
15
 }
16
   
17
a[title]:hover:after {
18
  content: attr(title);
19
  padding: 4px 8px;
20
  color: #333;
21
  position: absolute;
22
  left: 0;
23
  top: 100%;
24
  white-space: nowrap;
25
  z-index: 20px;
26
  -moz-border-radius: 5px;
27
  -webkit-border-radius: 5px;
28
  border-radius: 5px;
29
  -moz-box-shadow: 0px 0px 4px #222;
30
  -webkit-box-shadow: 0px 0px 4px #222;
31
  box-shadow: 0px 0px 4px #222;
32
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
33
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
34
 }
35
 
36
</style>
37
</head>
38
 
39
<body>
40
<a href="http://www.ykmaiz.com" title="一个不错的电动阀门编程技术博客">麦子编程博客</a>
41
</body>
42
</html>

转载于:https://www.cnblogs.com/shhxpump/archive/2013/04/22/3035034.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值