鼠標經過背景變色之CSS+DIV方法

實現鼠標經過背景變色的方法有很多,今天我們介紹的是用CSS+DIV實現的方法。

方法一

#div:hover{background:#000000;}

解釋:鼠標經過id爲div的元素時背景變色

IE6.0、Firefox2.0、Opera 9.23都不行

方法二

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

方法三:

<style>

.d_over{background-color:#307172;}

.d_out{background-color:#EFEFEF;}

</style>

<div class="d_out" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'">哈哈哈哈哈</div>

<a>的標簽是可以,可是,這樣子會導致其它帶有<a>標簽的也跟著變色。

一般<a>是用來定義鏈接的樣式的,並不是定義某個區域的。現在常用的div+css的網頁用,div就是表示區域的意思,還是喜歡用這種,當然用table的話,會有更簡單的方法。

其實現在用的較多的是用<a>標簽實現的。

<style>

a {color:red; width:100px; height:22px; line-height:22px;}

a:hover {background:#f4f4f4; color:#000;}

</style>

這樣只要是代連接的都會變哦,你可以在某區域用,則某區域裏面的所有來連接的都會鼠標經過變色。

 
鼠標經過文字變色
<!--把如下代碼加入<body>區域中--> <script langauge="javascript">function check() {var l = document.theform.words.lengthalert("你已經輸入了"+document.theform.words.value.length+"個字母...查看完整版>>鼠標經過文字變色
 
鼠標經過文字變色
有什麽問題請到<a href='/bbs/forums.php?fid=21'>論壇</a>中發表<br><!-- http://www.webjx.com/ --><!-- http://bbs.webjx.com/ --><!--腳本說明:把如下代碼加入<body>區域...查看完整版>>鼠標經過文字變色
 
比較高效的表格行背景變色及選定高亮JS
  一個項目要用,又不想用jquery之類的東東。先去網上搜索了下,找到了不少在CSS中執行JS的表格行變色方式,不過這類方式在表格行多的時候相當卡,就自己按著最原始的方式倒騰了個出來獻給廣大的JS小白們(本人也算...查看完整版>>比較高效的表格行背景變色及選定高亮JS
 
CSS實現鼠標滑過表格變色
第一種: expression代碼如下:<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style type="text/css">.tablestyle{ background-color:#CCCCCC; borde...查看完整版>>CSS實現鼠標滑過表格變色
 
選擇DataGrid中的CheckBox控件後該行背景變色
在網絡開發中,經常遇到需要使用ASP.NET與JavaScript聯合進行控制的情況。在本篇中,將使用DataGrid進行數據綁定,使用Javascript控制當選中其中的checkbox時,該行顔色改變。首先,在頁面中創建一個DataGrid控件,並...查看完整版>>選擇DataGrid中的CheckBox控件後該行背景變色