`

鼠标经过时改变DIV背景颜色的三种途径

css 
阅读更多
方法一

#div:hover{background:#000000;}  


解释:鼠标经过id为div的元素时DIV背景变色

IE6.0、Firefox2.0、Opera9.23都不行

方法二

<divonmouseoverdivonmouseover="this.style.backgroundColor='#F4F9FD'" 
 
onmouseout="this.style.backgroundColor='#FFFFFF'"></div> 

方法三:

<style> 
.d_over{background-color:#307172;}  
.d_out{background-color:#EFEFEF;}  
</style> 

<divclassdivclass="d_out"onmouseover="this.className='d_over'"  
onmouseout="this.className='d_out'">DIV背景颜色</div> 


<a>的标签是可以,可是,这样子会导致其它带有<a>标签的也跟着变色。

一般<a>是用来定义链接的样式的,并不是定义某个区域的。现在常用的DIV+CSS的网页用,DIV就是表示区域的意思,还是喜欢用这种,当然用table的话,会有更简单的方法。

【编辑推荐】

DIV背景透明样式使用
JavaScript动态创建div属性和样式
CSS中border和clear两大属性用法揭秘
实现DIV居中布局三种途径
解读DIV CSS网页布局中CSS无效十个原因
分享到:
评论

相关推荐

    鼠标经过不同标签触发不同背景

    标题"鼠标经过不同标签触发不同背景"指的是当用户将鼠标悬停在网页的不同模块(如标签、按钮或链接)上时,页面背景会根据当前悬停的模块改变其样式,通常表现为背景颜色或图片的切换。这种效果能吸引用户的注意力,...

    CSS3 SVG文字背景动画.zip

    JavaScript是一种强大的脚本语言,它能够与用户进行交互,改变页面内容。jQuery是一个流行的JavaScript库,简化了DOM操作、事件处理和动画效果。在本项目中,JavaScript可能用于响应用户的交互,比如鼠标悬停或点击...

    jQuery鼠标悬停图片遮罩效果.rar

    遮罩层的背景颜色可以自定义,通常选择半透明黑色,以便于突出显示遮罩内的信息。 3. **jQuery事件**:`mouseenter`和`mouseleave`是jQuery中的两个事件,分别在鼠标进入和离开元素时触发。在这个例子中,我们可以...

    当鼠标移动时出现特效的JQuery代码

    通过改变元素的css背景颜色,可以增强鼠标交互时的视觉特效。 6. 交互逻辑:鼠标悬停在“班级管理”表格单元格(id为p1)上时,对应的班级信息表格(class为myclass)会以慢动画显示出来,而学生管理信息表格...

    取色软件。。

    1. **背景颜色**:可以使用`&lt;body&gt;`或`&lt;div&gt;`等元素的`style`属性设置背景颜色,如`style="background-color: #FF0000;"`,其中`#FF0000`为红色的HEX颜色代码。 2. **文字颜色**:通过`color`属性设置文字颜色,...

    js刮刮卡效果

    - 设置刮刮卡容器的宽高,以及背景颜色等基本属性。 - 对覆盖层设置背景色或图片,使其覆盖在内容层之上,通常设置为不透明或部分透明,以便隐约看到下面的内容。 - 内容层的样式应与刮刮卡最终显示的状态一致。 ...

    JS及其各种经典导航菜单

    例如,通过CSS设置`hover`伪类改变鼠标悬停时的背景色,通过`active`伪类标记当前选中的菜单项。同时,通过CSS的`position`属性,我们可以实现菜单项的相对或绝对定位,以便于下拉菜单的对齐和显示。 在实际开发中...

    js+html实现网页底部菜单栏

    可以设置背景颜色、字体样式、布局等,使其与网站整体风格保持一致。例如: ```css #menuBar { position: fixed; bottom: 0; width: 100%; background-color: #333; color: #fff; text-align: center; } #...

    淘宝特效代码

    3. **视觉效果**:利用CSS3的动画和过渡效果,以及背景图像和颜色变化,创造丰富的视觉体验。 4. **性能优化**:合理使用缓存、压缩代码和减少HTTP请求,以提高页面加载速度和整体性能。 总之,淘宝特效代码不仅...

    html-css-javascript-php

    - `background-color`: 设置背景颜色。 - `font-family`: 设置字体系列。 - `font-size`: 设置字体大小。 - `text-align`: 设置文本对齐方式。 - `padding` 和 `margin`: 设置内边距和外边距。 - `border`: ...

    JS+CSS实现美化的下拉列表框效果

    CSS主要负责改变下拉列表框的外观,包括颜色、背景、边框、字体、布局等。例如,可以通过定义类选择器来改变`&lt;select&gt;`元素及其`&lt;option&gt;`子元素的样式。在示例代码中,可以看到使用了ID选择器`#age_sel_2`来定位...

    HTML+CSS实现漂亮的查询部件实例

    请注意,`.submitButton:hover`选择器用于在鼠标悬停时改变按钮的样式,例如添加下划线。 在说明部分,提到了文本框和按钮在HTML中预编译后的代码。这主要是为了强调在ASP.NET中,这些元素会被转换成标准的HTML元素...

    使用html+css+js实现一个静态页面(含源码)

    2. **鼠标滑过特效**:为了增加网页的交互性,可以通过CSS或JavaScript实现鼠标滑过时的特效,比如改变字体颜色、背景颜色或者显示隐藏元素等。这部分内容要求学生掌握CSS伪类选择器(如`:hover`)的用法,以及简单...

    Minesweeper:用HTMLCSSJS制作的扫雷游戏

    例如,你可以使用CSS来定义扫雷格子的大小、边框、背景色以及鼠标悬停时的样式变化。通过定位和布局技巧,如网格布局或Flexbox,可以轻松地将整个游戏板排列整齐。此外,CSS动画可以增强用户体验,如点击格子时的...

    全国计算机一级考试选择题题库(含答案).doc

    在Windows中,要改变窗口的排列方式,可以使用鼠标右键单击任务栏空白处,然后在弹出的快捷菜单中选择相应的排列方式。 **拓展内容:** - **窗口排列选项**:层叠窗口、堆叠显示窗口、并排显示窗口等。 - **窗口...

    twofacedloginform:这是一个关于两面登录表单的网站

    同时,CSS还可以用于添加交互效果,比如当鼠标悬停在按钮上时改变颜色,或者在输入框获得焦点时显示下划线,提升用户体验。 最后,考虑到安全性,可能还需要使用JavaScript进行表单验证,确保用户输入的信息满足...

Global site tag (gtag.js) - Google Analytics