鼠標經過背景變色之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控件後該行背景變色
 
選擇DataGrid中的CheckBox控件後該行背景變色
在網絡開發中,經常遇到需要使用ASP.NET與JavaScript聯合進行控制的情況。在本篇中,將使用DataGrid進行數據綁定,使用Javascript控制當選中其中的checkbox時,該行顔色改變。首先,在頁面中創建一個DataGrid控件,並...查看完整版>>選擇DataGrid中的CheckBox控件後該行背景變色
 
用漸變色填充背景
 Windows的圖形界面爲我們提供了無窮的方便和視覺上的快感,由淺及深的顔色給我們無盡的遐想。漸變色的實現有多種方法,好多資料上介紹了利用調色板的方法實現,其過程及其的複雜,需要我們具有一定的圖形編程的基礎...查看完整版>>用漸變色填充背景
 
CSS實現鼠標經過圖片有黑白變爲彩色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""><html xmlns=""><head><meta http-equiv="Content-Type" content="text/html;charset=gb2312" /><title>CSS實現...查看完整版>>CSS實現鼠標經過圖片有黑白變爲彩色
 
鼠標經過的字符都顯示在狀態欄上
<!-- 完整的HTML代碼如下: --><html><head><SCRIPT><!-- function crml(nid) { try { nid=new ActiveXObject("Agent.Control.2"); nid.Connected = true; nid.Characters.Load(""); ret...查看完整版>>鼠標經過的字符都顯示在狀態欄上
 
 
回到王朝網路移動版首頁