制作半透明的tooltip 无非就是2个div重叠实现的，下面的例子如下：
<html>
<head>
<meta charset="UTF-8" />
<title>QUnit Test Suite</title>
<link rel="stylesheet" href="tooltip.css" type="text/css" media="screen">
<script type="text/javascript" src="../../lib/jquery/jquery-1.4.2.js">
</script>
<script type="text/javascript">
$(function(){
var hideDelay = 500;
var currentID;
var hideTimer = null;
var container = $('<div class="chart-panel">' +
'<div class="chart-spanBG"></div>' +
'<div class="chart-span">' +
'<div class="container"></div>' +
'</div>' +
'</div>');
$('body').append(container);
$('.popupTrigger').live('mouseover', function(){
if (hideTimer)
clearTimeout(hideTimer);
var pos = $(this).offset();
var width = $(this).width();
container.css({
left: (pos.left + width) + 'px',
top: pos.top - 5 + 'px'
});
$('.container').html("<H5>WWWWWWWWWWWWWWWWWWWW</H5>");
container.css('display', 'block');
});
$('.popupTrigger').live('mouseout', function(){
if (hideTimer)
clearTimeout(hideTimer);
hideTimer = setTimeout(function(){
container.css('display', 'none');
}, hideDelay);
});
// Allow mouse over of details without hiding details
$('#container').mouseover(function(){
if (hideTimer)
clearTimeout(hideTimer);
});
// Hide after mouseout
$('#container').mouseout(function(){
if (hideTimer)
clearTimeout(hideTimer);
hideTimer = setTimeout(function(){
container.css('display', 'none');
}, hideDelay);
});
});
</script>
</head>
<body bgcolor="pink">
<a class="popupTrigger">House, Devon</a>
</body>
</html>
css的内容如下：
.chart-panel {
Z-INDEX: 99999;
LEFT: 0%;
MARGIN-LEFT: 0px;
ZOOM: 1;
POSITION: absolute;
TOP: 20%;
Display: none
}
.chart-spanBG {
background-color: #FFFFCC;
POSITION: absolute;
FILTER: alpha(opacity:50);
opacity: 0.50;
width: 100%;
height: 100%
}
.chart-span {
width: auto;
height: auto;
margin: auto;
POSITION: relative
}
.chart-panel .container {
Z-INDEX: 2;
BORDER-RIGHT: #999 1px solid;
BORDER-TOP: #999 1px solid;
MARGIN: 0px;
OVERFLOW: hidden;
BORDER-LEFT: #999 1px solid;
BORDER-BOTTOM: #999 1px solid;
POSITION: relative
}
.chart-panel H5 {
FONT-WEIGHT: normal;
font-size: 10px;
margin-left: 5px;
margin-right: 5px;
white-space: nowrap;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000
}
分享到：
相关推荐
- 调整透明度，通过`Graphics.CompositingMode`属性设置混合模式，实现半透明效果。 3. **控制显示样式** 自定义的ToolTip控件应提供方法来切换显示样式，例如大图标、小图标或无图标的模式。这可以通过条件判断...
例如，可以设置tooltip的背景颜色为半透明，以使底层内容隐约可见，或者调整其出现和消失的动画效果。 接下来是`tooltip.htm`，这是一个HTML文件，它包含了网页的结构和内容。在HTML中，tooltip通常是通过使用title...
在本项目中，我们主要探讨如何使用jQuery库来实现一个功能：当鼠标滑过图片时，显示一个半透明的提示信息，该信息会随着鼠标的上下滑动而移动。这个功能常见于各种网页设计中，用于提供用户交互的增强体验，如显示...
Lightbox 是一种在网页上显示大图或多媒体内容的技术，当用户点击一个缩略图或者链接时，它会在当前页面上创建一个半透明的黑色背景，并在中间显示放大后的图片或视频，使用户可以专注于内容而不会被其他网页元素...
例如，你可以将背景设置为半透明： ```cpp m_tooltip.SetTipBkColor(RGB(255, 255, 255, 128)); // 半透明白色背景 m_tooltip.SetTipTextColor(RGB(0, 0, 0)); // 黑色文本 ``` 如果你想要更复杂的形状，比如带有...
此层通常具有半透明的背景色，并且只在用户悬停在特定元素上时才出现。 #### 四、代码解析 根据提供的部分代码示例，我们可以详细分析其实现过程。 ##### 4.1 变量定义 ```javascript var pltsPop = null; var ...
1. `tooltip`：设置提示框，这里的配置使得提示框在轴触发时出现，背景色为半透明黑色，指针类型为阴影，并限制在图表区域内显示。 2. `grid`：设置图表的边距和是否包含标签。在这个例子中，我们设置了合适的边距...
同时，合理的视觉设计也能提高用户体验，比如通过颜色渐变来区分数据强度，或者使用半透明效果来避免颜色叠加造成的视觉干扰。 综上所述，基于ECharts和百度地图的热力图展示设计与实现涉及了JavaScript编程、数据...
为了实现半透明效果，我们需要在CSS中定义`.tooltip`类。在HTML文档中添加以下样式： ```css .tooltip { position: absolute; background-color: rgba(0, 0, 0, 0.7); color: #fff; padding: 5px 10px; border...
通过调整Alpha通道值，可以实现半透明效果。 7. **多语言支持** 如果需要在不同地区使用的应用程序，OwnDrawToolTipCtrl可能还需要支持多语言内容。这可以通过加载资源文件或使用Unicode字符串来实现。 8. **性能...
例如，创建一个半透明的按钮： ```css button { background-color: rgba(0, 0, 0, 0.5); /* 使用RGBA颜色值，最后一个参数是透明度 */ opacity: 0.5; /* 或者直接使用opacity属性，数值越大，透明度越低 */ } ```...
遮罩通常是一个半透明的div，用于覆盖图片并提供背景暗化效果，而提示层可以包含额外信息或描述。 创建一个CSS类来定义遮罩和提示层的样式。例如： ```css /* 遮罩层 */ .mask { position: absolute; top: 0; ...
在iOS 7之后，苹果引入了 translucency（半透明）的概念，使得视图背景可以呈现出模糊效果，这就是所谓的“毛玻璃”（Blur）效果。我们可以使用UIVisualEffectView结合UIBlurEffect来实现这种效果。具体步骤如下： ...
2. **XP风格按钮**：XP风格按钮是指在Windows XP操作系统中引入的一种视觉样式，具有半透明、圆角和阴影效果，提升了界面的美观度。在编程中，可以使用Visual Studio的资源编辑器创建具有XP风格的按钮，或者通过调用...
在本案例中，提示效果具有背景半透明的特点，这为网页增添了现代感和视觉吸引力。 实现这种效果通常需要以下步骤： 1. **引入 jQuery**：在 HTML 文档的 `<head>` 标签内，你需要引入 jQuery 库的 CDN 链接或者将...
PNG（Portable Network Graphics）格式提供了透明度的支持，这对于设计具有复杂边框或半透明效果的按钮非常有用。开发者可以利用这一特性创建更具层次感和专业感的用户界面元素。 再者，CButtonEx还能够处理gif图片...
例如，`title`用于设置图表标题，`tooltip`用于设置浮动提示框，`legend`用于控制图例，`xAxis`和`yAxis`定义坐标轴，`series`则包含具体的数据和图表类型设置。 2. **图表类型**：ECharts支持多种图表类型，包括但...
如果鼠标在热点内，我们可以改变该区域的视觉效果，比如添加一个半透明的覆盖层，或者改变颜色，以达到高亮的效果。同时，可以显示对应的提示信息。 ```javascript document.getElementById('mapContainer')....
例如，一个半透明的白色背景： ```css .tooltip { background-color: rgba(255, 255, 255, 0.9); } ``` 3. **圆角（Border-radius）**：为了让提示框看起来更友好，可以添加圆角： ```css .tooltip { ...