`
frank1998819
  • 浏览: 751839 次
  • 性别: Icon_minigender_1
  • 来自: 南京
文章分类
社区版块
存档分类

鼠标放上去显示层 DIV

    博客分类:
  • Html
 
阅读更多

<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
td {
 font-family: "宋体";
 font-size: 12px;
}
</style> 
<script type="text/javascript">
 function show(obj){  
  document.getElementById('testShowDivBlock').style.display="block";
  obj.style.background="#FF9933";
 }  
 function hide(obj){  
  document.getElementById('testShowDivBlock').style.display="none";
  obj.style.background="#FFFFFF";  
 } 
 </script>
 </head>

 <body>

<table>  
 <tr>
  <td with="80px"></td>
  <td id='h' onMouseOver="javascript:show(this);" onMouseOut=hide(this); style="cursor:hand">鼠标放上去1</td>  
 </tr>  
</table>  
<br> <br> <br> <br>
 <table>  
 <tr>
  <td with="80px"></td>
  <td id='h' onMouseOver="javascript:show(this);" onMouseOut=hide(this); style="cursor:hand">鼠标放上去2</td>  
 </tr>  
</table>


 
 <div id="testShowDivBlock" style="position:absolute;display:none;">
     <table width="194" height="101" border="0" cellpadding="0" cellspacing="1" bgcolor="#C1F0FF">
   <tr align="center" bgcolor="#DFF8FF">
      <td><strong>语1文</strong></td>
   <td><strong>数学</strong></td>
   <td><strong>英语</strong></td>
   </tr>
   <tr align="center" bgcolor="#FBFEFF">
      <td>120</td>
   <td>113</td>
   <td>127</td>
   </tr>
   <tr align="center" bgcolor="#DFF8FF">
   <td><strong>语文</strong></td>
   <td><strong>数学</strong></td>
   <td><strong>英语</strong></td>
   </tr>
   <tr align="center" bgcolor="#FBFEFF"><td>120</td>
   <td>113</td>
   <td>127</td>
   </tr>
  </table>
</div>
 </body>
</html>

分享到:
评论

相关推荐

    js鼠标浮动显示div

    在本案例中,"js鼠标浮动显示div"指的是当鼠标移动到特定的input元素上时,会显示出一个div层,该div层中包含有与input相关的附加信息或者功能。 首先,我们需要了解几个关键的概念: 1. **事件监听器**:...

    仿CSDN鼠标移上去的显示DIV浮动层

    在网页设计中,"仿CSDN鼠标移上去的显示DIV浮动层"是一种常见的交互设计技术,主要用于增强用户体验,提供更多的信息提示。这种效果常见于文章列表、菜单栏或者按钮等元素,当用户将鼠标悬停在某个元素上时,会有一...

    鼠标经过显示隐藏div

    ### 鼠标经过显示隐藏div - JavaScript与CSS结合实现 在Web开发中,通过JavaScript(简称JS)和CSS结合可以实现很多动态效果,其中“鼠标经过显示隐藏div”就是一个非常实用的功能。本文将详细解析如何利用这些技术...

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

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

    鼠标放上去显示层及信息详情.

    - `id="hidd"`:初始设置为隐藏(`display: none`),当鼠标移至原图上时显示,内部放置放大后的图片。 - `id="ceshi"`:用于测试目的,背景黄色,宽100%,高200px。 #### 2. **CSS样式** - 使用`float:left;`...

    鼠标悬停在按钮上弹出DIV层页面,鼠标离开后层消失jquery实例

    本文将深入探讨如何使用jQuery实现一个“鼠标悬停在按钮上弹出DIV层页面,鼠标离开后层消失”的功能,这通常被称为“浮动提示框”或“悬停弹窗”。这个功能在很多网站,如当当网,被广泛应用来展示更多的信息或者...

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

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

    鼠标悬停某个标记时的DIV层显示

    综上所述,实现“鼠标悬停某个标记时的DIV层显示”这一效果,需要结合jQuery的事件监听和DOM操作,以及Ajax的异步数据获取。通过这些技术,我们可以创建动态且响应式的网页,提高用户的交互体验。记得在实际项目中,...

    JS+CSS实现感应鼠标渐变显示DIV层的方法.docx

    本文主要介绍了一种使用JavaScript(JS)和层叠样式表(CSS)相结合的方法,来实现鼠标感应的渐变显示和隐藏DIV层的效果。 首先,我们来理解一下核心的HTML结构。在这个例子中,我们有一个ID为"tip"的DIV元素,它是...

    DivCss鼠标划过滑动门效果

    "DivCss鼠标划过滑动门效果"就是利用CSS来实现的一种特定的滑动门效果,它通过改变鼠标悬停在元素上时的背景图像位置,创造出一种类似门开启或关闭的动画效果。 具体来说,滑动门效果主要基于以下CSS属性: 1. **...

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

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

    div css移动鼠标改变样式弹出div层

    本话题主要探讨如何利用 `div` 和 `css` 实现一个动态效果:当鼠标移动到特定`div`上时,能够改变样式并弹出一个相关信息的`div`层。 首先,我们需要创建两个`div`元素:一个作为主内容区域,另一个作为弹出层。在...

    jquery鼠标放上去显示悬浮层即弹出定位的div层

    在网页设计中,有时我们需要实现一种交互效果:当鼠标悬停在特定元素上时,会显示一个悬浮层(通常是一个div层),展示相关信息。这种效果能够提供用户友好的体验,帮助用户快速获取需要的信息。本篇文章将详细讲解...

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

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

    漂浮鼠标显示div

    当用户将鼠标指针悬停在特定元素上时,一个div层会以浮动的方式出现在屏幕上的指定位置,展示相关信息。这种效果常用于提示信息、工具提示或者下拉菜单等,能提供额外的用户体验,使用户更容易理解和操作网站。 ...

    实现鼠标放在图片上显示一个播放图标

    在网页设计中,有时我们希望在用户将鼠标悬停在图片上时,能显示特定的交互元素,例如一个播放按钮。这种效果可以通过结合CSS(层叠样式表)和HTML(超文本标记语言)来实现。下面我们将详细探讨如何实现这个功能。 ...

    鼠标放到图片上显示图文提示效果

    在网页设计中,实现“鼠标放到图片上显示图文提示效果”是一种常见的交互设计技术,它能够为用户提供更直观的信息展示,提升用户体验。这种效果通常被称为悬停提示(Tooltip)或下拉层(Dropdown)。在本案例中,...

    bootstrap显示DIV

    在Bootstrap中,"显示DIV"是一个常见的需求,涉及到如何控制元素的可见性和布局。这里我们将深入探讨Bootstrap如何实现这一功能,以及与jQuery、弹框和下拉菜单等相关知识点。 首先,Bootstrap的显示和隐藏功能主要...

    jQuery炫酷鼠标滑过图片显示遮罩层特效.zip

    在本文中,我们将深入探讨如何使用jQuery和CSS3来实现一款炫酷的鼠标滑过图片显示遮罩层的特效。这种特效广泛应用于网页设计中,为用户提供了丰富的交互体验,尤其是在图片展示、相册功能或者产品展示方面。 首先,...

Global site tag (gtag.js) - Google Analytics