`
sunxboy
  • 浏览: 2871377 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

用CSS控制onmouseover/out的背景颜色的方法

阅读更多
onmouseover: expression(onmouseover=function (){this.style.borderColor ='';
this.style.color='';this.style.backgroundColor ='#99E2FB'});

onmouseout: expression(onmouseout=function (){this.style.borderColor='';
this.style.color='';this.style.backgroundColor =''});

background-color:#00BFFF;

    简单实用,这样在你更换样式的时候就不必再动程序页面,一个CSS搞掂

<style type="text/css">
.JsInCss{
event:expression(
onmouseover = function()
{
this.style.backgroundColor='#f0f0f0'
sotuku.style.display=''
},
onmouseout = function()
{
this.style.backgroundColor='#ffffff'
sotuku.style.display='none'
}
)
}
</style>
 
分享到:
评论
4 楼 refar 2011-04-22  
qiuzhiqing 写道
可以在IE中跑,但是不能在FireFox中运行。

是,没什么用。
3 楼 sunxboy 2008-01-24  
哦,是吗。可否有替代实现?
2 楼 huangyou 2008-01-23  
不推荐方法,类似做法在表格固定表头时,当数据量多时显示就变得很慢
1 楼 qiuzhiqing 2008-01-23  
可以在IE中跑,但是不能在FireFox中运行。

相关推荐

    CSS结合JS+DW中的CSS使用+滤镜.pdf

    - 设置背景颜色、图像、重复方式等。 3. Block(块) - 控制元素的块级特性,如行高、换行等。 4. Box(盒子) - 包括内边距、外边距、宽度和高度等。 5. Border(边框) - 边框样式、宽度和颜色的设置。 6....

    javascript改变表格行的颜色

    `style.backgroundColor`属性用于设置或更改元素的背景颜色。 #### 3. 使用标准事件监听器 虽然内联事件处理程序简单易用,但它们不利于代码维护和扩展。更推荐的做法是使用标准的事件监听器: ```javascript // ...

    纯CSS实现的下拉菜单

    - `#sddm li a:hover`: 当鼠标悬停在主菜单项上时,改变链接的背景颜色。 - `#sddm div a:hover`: 子菜单中的链接同样具有悬停效果。 这些样式通过简单的选择器实现了清晰的布局和美观的视觉效果。 #### 三、...

    JS实现鼠标经过背景自动变色代码.zip

    例如,我们可以创建一个`&lt;div&gt;`元素,并设置其初始背景颜色: ```html ;"&gt;鼠标经过我&lt;/div&gt; ``` 然后,在JavaScript中,我们可以为这个`&lt;div&gt;`元素编写两个函数:一个用于改变背景色,另一个用于恢复原色。这里...

    div css 鼠标悬停在div层上时,div背景色改变

    在本例中,我们需要实现一个功能,即当用户将鼠标悬停在div元素上时,div的背景颜色发生变化。这个效果可以通过CSS伪类和JavaScript来实现。 首先,我们创建两个CSS类,一个表示默认状态,另一个表示鼠标悬停时的...

    javascript经典特效---变换链接色和底色.rar

    5. **CSS和JavaScript结合**:虽然CSS也可以实现颜色和背景色的过渡动画,但JavaScript能提供更灵活的控制,比如基于特定条件的即时变化。同时,我们还可以结合CSS预处理器(如Sass或Less)和CSS变量,使JavaScript...

    JS+CSS实现一个气泡提示框

    在上面给出的代码示例中,`div`元素具有类名为`bubble_tooltip_common`的样式类,它定义了提示框的宽度、高度、背景颜色、边框样式、圆角以及阴影等。另外,`label`元素则使用了`.triRight`和`.triRightInner`两个类...

    js鼠标经过变色

    /* 改变背景颜色 */ } ``` ##### 3.3 完整示例代码 下面提供一个完整的HTML示例代码,包括CSS样式和JavaScript逻辑: ```html &lt;!DOCTYPE html&gt; 鼠标经过变色示例&lt;/title&gt; .on_zzjs2 { color: red; ...

    右下角圆形导航

    /* 设置背景颜色 */ color: #fff; /* 设置文本颜色 */ text-align: center; /* 内容居中 */ line-height: 50px; /* 垂直居中 */ } ``` 接着,JavaScript在圆形导航中的作用主要是实现动态效果和交互性。例如,...

    文字列表鼠标移动单元格渐变动画特效

    当项目使用React、Vue等前端框架时,可以利用其提供的生命周期方法或响应式数据绑定来控制动画。例如,在React中,可以在`componentDidMount`或`componentDidUpdate`中添加动画逻辑,Vue则可以利用`v-on`指令绑定...

    js设置鼠标悬停改变背景色实现详解

    本例中,CSS定义了三种状态下的背景颜色: ```css .out{background-color:gray;} .over{background-color:red;} .down{background-color:yellow;} ``` 这说明了三个类(.out, .over, .down)分别对应的背景色是灰色...

    jsp鼠标效果 鼠标效果. 鼠标效果.

    此外,还可以使用CSS3的动画和过渡效果来创建更动态的鼠标效果,如平滑的颜色变化、缩放或旋转等。例如: ```css /* CSS 代码示例 */ .box { width: 100px; height: 100px; background-color: blue; transition...

    javascript例子教程20120614.docx

    这可以通过绑定`onmouseover`和`onmouseout`事件来实现,同时结合CSS定义不同的样式,从而改变元素的外观。 ```html &lt;p id="testPara" class="testNormal" onmouseover="over()" onmouseout="out()"&gt; 我是示例段落...

    使用JavaScript动态设置样式实现代码(2)

    这不仅加深了对JavaScript事件监听和处理的理解,而且也增强了对CSS样式的控制能力。对于希望提高前端交互设计能力的开发者来说,这是一个非常实用的学习案例。通过实践这些技术,开发者可以为网站用户创建更加友好...

    displaytag分页和鼠标经过变色功能

    这样,只需通过改变CSS类就能控制行的背景颜色。 在JSP测试代码中,可以看到 `m_over()` 和 `m_out()` 函数的定义,以及对应的CSS样式 `.trmo`,当这个类被应用到表格行上时,背景色会变为浅粉色。同时,`display:...

    【JavaScript源代码】JavaScript实现表格动态变色.docx

    为了实现变色效果,我们需要在CSS中定义一个类,比如`.bg`,用于指定背景颜色。在这个例子中,我们定义了一个绿色的背景颜色。同时,可能还需要对表头的样式进行设定,例如设置粉色背景。 ```css th { background...

    JS浏览器兼容的小问题,鼠标经过,,高亮显示

    为解决这个问题,可以使用CSS3的transition属性来平滑过渡颜色变化,或者在JavaScript中引入短暂的延迟(如setTimeout)来确保mouseout事件在鼠标真正离开后才执行。 总结来说,处理JS浏览器兼容问题时,我们需要...

    第34章 项目1-博客前端:封装库--下拉菜单1

    为了增加视觉吸引力,可以为下拉菜单定义不同的背景颜色,例如默认背景色为FBF7E1,鼠标悬停时变为FFCC00。设计时要确保界面简洁且易于理解,使得用户能够快速找到所需的功能。 其次,**设置效果**是实现下拉菜单...

    基于css3的属性transition制作菜单导航效果

    这意味着变换过程将在0.2秒内完成,使用了`ease-out`的缓动函数,它使得变化开始时较快然后逐渐减慢,给用户一个自然的感觉。 为了消除在Chrome浏览器中由于CSS3动画初始渲染导致的页面闪动问题,采用了两个特定于...

Global site tag (gtag.js) - Google Analytics