`

通过DIV+CSS实现 一块没有连接的区域实现鼠标事件的动态效果

 
阅读更多

 

<style>

/*=DIV+CSS实现区域响应鼠标事件=*/
body
{
font:Arial,宋体;
font-size:12px;
padding:30px;
text-align:center;
}

/*外表格*/
#DivTable
{
width:80%;
height:480px;
text-align:left;
cursor:pointer;
}

/*普通样式*/
.Content
{
color:#C6005C;
border:1px solid #FFB6DA;
border-left:8px solid #FFB6DA;
background:#FFEAF5; 
padding:10px;
}

/*鼠标到上面时效果*/
.ContentHover
{
border:1px solid #E50072;
border-left:8px solid #E50072;
background:#FF2491; 
padding:10px;
color:#FFFFFF;
}

/*鼠标按下时*/
.ContentDown
{
border:1px solid #C6005C;
border-left:8px solid #C6005C;
background:#DD0056; 
padding:10px; 
color:#FFFFFF;
}

.ContentInfo
{
background:#FFFFFF;
text-align:right;
margin:0px;
}

a:link,a:visited
{
text-decoration:none;
display:block;
padding:5px;
border-bottom:1px dashed #C6005C;
color:#CC0000;
}

a:hover
{
color:#FFFFFF;
background:#FF2467;
padding:5px;
border-bottom:1px dashed #C6005C;

}

.ContentCode
{
background:#FFFFFF;
border:1px dashed #333333;
color:#333333;
padding:5px;
margin:0px;
height:100px;
overflow:scroll ; 
}

</style>

 

下面html 引用

<div class="ContentCode">
    <div class="Content" onmouseover="this.className='ContentHover'" 
    	onmouseout="this.className='Content'" 
    	onmousedown="this.className='ContentDown'" 
    	onmouseup="this.className='ContentHover'" 
    	ondblclick="location='http://www.iteye.com/'"> 文字内容 </div>
   </div>
 

 

分享到:
评论

相关推荐

    DIV+CSS漂亮的样式

    在网页设计领域,`DIV+CSS`是一种广泛使用的布局技术,它通过定义不同的CSS(层叠样式表)类来控制HTML中的`&lt;div&gt;`元素,从而实现页面的精美设计和结构化布局。本资源包“漂亮样式CSS”包含了几个精心设计的`DIV+CSS...

    div+css制作的鼠标经过放大字体样式的特效

    ### div+css实现鼠标经过时字体放大的特效详解 在网页设计中,为了提升用户体验以及增强页面的互动性,开发者经常需要实现各种各样的动态效果。本文将详细介绍如何使用div和CSS来制作一个简单的鼠标经过时字体放大...

    地图DIV+CSS版源码

    同时,CSS还支持选择器、过渡效果、动画等特性,使得地图可以具有动态效果,如点击高亮区域、鼠标悬停显示信息等。 在压缩包的文件名称列表中,我们看到两个文件:`readme.md`和`中国地图DIV+CSS版`。`readme.md`...

    DIV+CSS布局大全

    ### DIV+CSS布局大全知识点详解 #### 一、选择正确的DOCTYPE 在开发基于DIV+CSS的网站时,首先需要确定使用的文档类型(DOCTYPE)。这一步骤对于确保代码兼容性和正确解析至关重要。 - **为什么要选择正确的...

    CSS+DIV和JS特效代码

    DIV元素是CSS布局中的基本构建块,它是一个无语义的容器,可以通过CSS来设置样式,实现各种布局模式。 在描述中提到的“网页菜单样式特效代码集锦”,主要涉及的是如何使用CSS和JavaScript创建吸引人的导航菜单。...

    漂亮的菜单效果(div+css)

    通过设置`display`属性,`&lt;div&gt;`元素可以被设置为行内元素或行内块元素,以适应不同的布局需求。 接着,我们来看看CSS在创建菜单效果中的作用。CSS允许我们控制网页的外观和布局,包括字体、颜色、尺寸、位置以及...

    100多个JQuery效果示例(实例)div+css+javascrpit

    18. jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19. jQuery图片自动轮播淡入淡出的幻灯插件iFadeSlide 20. jQuery大气banner带时间线自动播放的焦点图轮番切换代码 21. jquery定时自动切换banner...

    DIV+CSS仿京东商城导航条.rar

    为了增强用户体验,开发者还可能添加JavaScript或jQuery来实现一些动态效果,如鼠标悬停时的高亮显示、下拉菜单的展开与关闭等。 **五、SEO优化** 考虑到搜索引擎优化,导航条的文本内容应该清晰明了,便于搜索引擎...

    网页常用的DIV+CSS选项卡

    ### 网页常用的DIV+CSS选项卡设计与实现 #### 一、概述 在前端网页开发中,选项卡(Tabs)是一种常见的交互组件,它能够有效地组织和展示多个相关但不连续的信息区块,帮助用户在不同的内容块之间进行切换。这种...

    div滚动条样式一览-div+css设计网

    总结,通过CSS3,我们可以对`div`元素的滚动条进行深度定制,使其成为网页设计中的一部分,提升整体的美观性和交互性。尽管实现跨浏览器的兼容性可能需要额外的工作,但这绝对是值得的,因为它将使网页在视觉上更具...

    jQuery+css实现tab切换效果

    在网页设计中,Tab切换效果是一种常见的用户交互方式,它能帮助用户在多个内容区域间进行轻松导航。本文将深入探讨如何使用jQuery和CSS技术来实现这种效果。 首先,jQuery是一个轻量级、功能丰富的JavaScript库,它...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    3.jquery+css实现简洁两级横向导航菜单,带动态效果 4.jQuery+CSS实现竖形动感导航菜单效果 5.jquery+div漂亮SmartMenu下拉菜单气泡透明效果 6.jQuery+div实现flash炫彩菜单插件下载 7.jquery+div实用漂亮...

    div+css有实例,易学易懂

    - **负的边界值**:使用负的`margin`值实现特殊效果。 - **在内联元素中使用边界属性**:`margin`在内联元素中的使用情况。 ### 浏览器及兼容问题 - **浏览器介绍**:常见的浏览器及其特点。 - **要兼容哪些浏览器...

    css+div实现精美导航条 横向排列下拉子菜单

    本文将详细介绍如何利用CSS和Div来实现这一目标,以及如何通过JavaScript添加动画浮动效果。 首先,我们需要理解CSS的作用。CSS是一种样式语言,用于定义HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。...

    win8风格导航div css中文模板

    接着,为了让磁贴具有动态效果,我们可以利用CSS的伪类选择器,如`:hover`来改变鼠标悬停时的样式,或者利用`transition`属性实现平滑过渡效果: ```css .tile:hover { background-color: #009ACD; } .tile:hover...

    基于HTML+CSS动画的魔方爆炸效果

    HTML和CSS是网页设计的基础,它们分别负责网页的结构和样式。在这个名为“基于HTML+CSS动画的魔方爆炸效果”的...通过学习和分析这个项目,我们可以提升自己在网页动态效果制作方面的技能,进一步提升网站的用户体验。

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    18. jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19. jQuery图片自动轮播淡入淡出的幻灯插件iFadeSlide 20. jQuery大气banner带时间线自动播放的焦点图轮番切换代码 21. jquery定时自动切换banner...

    jQuery+CSS3仿windows8 Metro风格界面布局效果.zip

    本文将探讨如何通过jQuery和CSS3技术,实现一个类似Windows8 Metro风格的界面布局效果。 首先,jQuery作为一个强大的JavaScript库,提供了一系列方便的API,使得开发者能够更轻松地处理DOM操作、事件处理和动画效果...

    JavaScript+CSS层拖动类示例

    "JavaScript+CSS层拖动类示例"提供了一个实用的解决方案,它允许用户通过鼠标轻松地移动页面上的元素,例如窗口、图片或者文本框。这个实例包含三个不同的例子,分别演示了图片窗口、纯文本以及图文混合的拖动效果。...

    CSS3鼠标悬停方块散开动画特效

    【CSS3鼠标悬停方块散开动画特效】是一种创新且引人注目的网页设计技巧,它利用了CSS3的强大功能来实现动态交互效果。在网页设计中,这种特效能够吸引用户注意力,提升用户体验,特别是在产品展示或者导航菜单中。 ...

Global site tag (gtag.js) - Google Analytics