HTML中實現鼠標移動到table中某個單元格中顏色改變

html中，我們經常會用到table布局；有時候需要實現指定單元格，當鼠標移動到上面的時候，該單元格背景變色，不是該行背景變色，也不是僅僅文字的背景變色；

html的文件結構大家都是知道的了，總體分為head和body部分

我們要實現變色，在head部分實現格式

<style>

.tablex {border-collapse: collapse;}

.tablex tr {}

.tablex tr td {text-align:center; line-height:30px;}

.tablex tr td:hover { background-color:#f00; color:#fff;}

</style>

然后在body部分，使用table時候，注明class="tablex".這樣的話，就實現了我們所說的效果了。

附上完整代碼：

<html>

<head>

<title>測試鼠標移到到表格單元格背景顏色改變的</title>

<style>

.table1 {border-collapse: collapse;}

.table1 tr {}

.table1 tr td {text-align:center; line-height:30px;}

.table1 tr td:hover { background-color:#006030; color:#006030;}

</style>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

在任何一個瀏覽器中運行，效果如下

南大盛聯20年來一直致力于高端IT培訓--打造高級軟件人才實戰培訓專家，學生對我們的認可是我們一直前進的動力；項目團隊全球招聘，特聘來自海外的老師進行任教，采用100%商業項目進行實戰培訓，線上線下同步進行。

課程全部緊隨市場需求進行設計，并且動態進行調整；7天免費試聽，0首付開始學習，學完后進行100%推薦就業，不滿意工作崗位2次推薦。

選定一個平臺，認識一群志同道合的朋友，你的未來人生路必定不一樣。

目前已經開設下面這些培訓項目

Java培訓

安卓培訓

JavaWeb培訓

Linux培訓

云服務器布置培訓

HTML5培訓

SEO培訓

視頻剪輯培訓

UI培訓

歡迎您們分享給自己愿意分享的朋友，大家一起來進步；相互轉告，咨詢，學習。

南大盛聯培訓理念：我懂，我也能讓你懂。

標懸停提示是指當鼠標懸停在某一元素上時瀏覽器彈出的黃色小文本框，一般開發者大多會結合Javascript創建各式各樣的自定義提示，其實通過CSS定位也可以實現，首先我們看一下效果圖：

接下來我們詳細介紹它的實現方法：

首先創建一個簡單的帶鏈接的HTML（根據自己的需要），在鏈接顯示的文本后面添加需要提示的內容并置于span標簽中（加粗部分）
<p>
<a href="www.laosiji.com" style="text-decoration:none">www.你懂的.com<span>(未滿18周歲請勿點擊)</span></a> is a Horror Movies Website.
</p>
接下來是關鍵部分，先將鏈接的position屬性設置為relative,因為<a>是<span>的父級元素，這樣接下來才可以讓<span>中的提示內容根據<a>中的鏈接文本進行絕對定位。<span>中的提示內容我們不希望它一開始就顯示出來，所以要將它的display屬性設置為none.
a{position:relative;}
a span{display:none;}
當鼠標懸停在鏈接上時我們希望顯示出span中的提示內容，這時就需要將span的display屬性設置為block，為了讓其出現在鏈接的右下方，需要將span的position屬性設置為absolute，并設置一定的距離（頂部1em,左邊2em).
a{position:relative;}
a span{display:none;}
a:hover span{display:block;
position:absolute;top:1em;left:2em;}
前兩步基已經完成了本次案例的主體，剩下的就是給span添加一些樣式，讓它看起來更像是提示。可以添加一些內邊距邊框和背景顏色等。
<style type="text/css">
a{position:relative;}
a span{display:none;}
a:hover span{display:block;
position:absolute;top:1em;left:2em;
width:160px;
padding:0.2em 0.6em;
border:1px solid #996633;
background-color:#FFFF66;
color:red;}
</style>
PS:最后科普一下display:none與visible:hidden的區別
display:none ---不為被隱藏的對象保留其物理空間，即該對象在頁面上徹底消失，通俗來說就是看不見也摸不到。
visible:hidden--- 使對象在網頁上不可見，但該對象在網頁上所占的空間沒有改變，通俗來說就是看不見但摸得到。

歡看電影的朋友肯定會注意到一個有趣的細節，就是電影出品方一定會在片頭的Logo環節做一個小特效：暗影流動之間光澤一閃而過，這樣做不僅可以提高Logo的辨識度，還可以提升質感，一舉兩得。參照華納兄弟影業(Warner Bros. Pictures)的例子：

那么，在前端領域，如果使用純CSS技術，能不能實現類似的特效呢？答案當然是可以的，這次我們以本站的Logo為例子，以一持萬、提綱挈領地講解一下如何使用純CSS技術實現圖片Logo鼠標懸停光澤一閃而過的光影特效。

一般情況下，大多數前端開發會選擇 linear-gradient() ，這個方法創建一個表示兩種或多種顏色線性漸變的圖片。其結果屬于<gradient>數據類型，是一種特別的<image>數據類型。

簡單用法：

/* 漸變軸為45度，從藍色漸變到紅色 */
linear-gradient(45deg, blue, red);

/* 從右下到左上、從藍色漸變到紅色 */
linear-gradient(to left top, blue, red);

/* 從下到上，從藍色開始漸變、到高度40%位置是綠色漸變開始、最后以紅色結束 */
linear-gradient(0deg, blue, green 40%, red);

那么它怎么和logo圖片結合使用呢？首先創建一個對象，因為是logo，所以我使用a標簽，也就是超級鏈接，隨后聲明偽類mylogo：

<a href="/" class="mylogo" title="劉悅的技術博客"></a>

之后，定義logo的樣式：

.mylogo{	
		display:block;
		margin: 0 auto;
    width:255px;
    height:200px;
    background-image:/logo.png;
    background-repeat: no-repeat;
}

接著就是linear-gradient()出場，原理并不復雜，利用linear-gradient繪制一個白色半透明漸變層，利用背景的負坐標隱藏起來，同時配合transition屬性，在鼠標懸停(hover)的時候，設置1秒鐘的延時動畫，逐漸將光斑的坐標進行位移，產生一種光澤掠過的效果：

.mylogo{
            width: 255px;
            height: 200px;
 
            background: -webkit-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,0.5)50%, rgba(255,255,255,0)100%) no-repeat -270px 0, url(/logo.png) no-repeat;
            transition: 1s ease;
        }

.mylogo:hover {

	background-position: 200px 0, 0 0;
}

這里需要注意的是，默認負坐標一定要超過logo本體的寬度，否則位移就不夠充分，效果是下面這樣的:

看起來還不錯，這里transition的屬性設置在logo本體的偽類上面，此時如果logo本體失去鼠標的焦點，光斑位置又會回到原來的負坐標，此時光影又會在回閃一次，也就是一次懸停發生兩次位移，閃爍兩次，如果只想閃一次，可以將transition加載hover偽類中，這樣離開后不會二次位移，因為動畫效果只會出現在鼠標懸停上，鼠標離開后，就沒有動畫回閃了：

.mylogo{
            width: 255px;
            height: 200px;
            /*直接使用background縮放版本*/
            /*每個漸變點的位置不能太小，不然會出現殘缺光斑*/
            /*no-repeat -270px 0：將光斑定位隱藏起來*/
            background: -webkit-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,0.5)50%, rgba(255,255,255,0)100%) no-repeat -270px 0, url(/logo.png) no-repeat;
           /* transition: 1s ease;  */
        }

.mylogo:hover{
	/*鼠標滑過實現光斑滑動，但是在多背景情況下，需要多個background-position屬性值，否則會影響其他背景*/
	background-position: 200px 0, 0 0;
	transition: 1s ease;
}

效果是這樣的：

但是這就結束了嗎？還沒有，因為這看起來似乎。。。有點一律千篇？

如果所有人都用linear-gradient，就難免有點無趣了，那么有沒有別的不落窠臼的玩兒法呢？

既然曉得了原理，無非就是位移產生的小把戲，那么我們完全脫離linear-gradient，使用一張帶光澤質感的背景圖片shine.png：

由于使用了背景圖，所以我們需要對代碼進行修改，為實體的背景圖添加一個容器，span標簽：

<a href="/" class="mylogo" title="劉悅的技術博客"><span></span></a>

樣式和linear-gradient差不多，也是利用負坐標將span標簽內的背景圖隱藏起來：

.mylogo span {
	display: block;
	background: url("/shine.png") -360px -380px no-repeat;	

	transition-property: all;
	transition-duration: .7s;

	height: 200px;
	width: 255px;
}

接下來要比linear-gradient要簡單地多，直接設置懸停屬性，讓背景圖片發生位移：

.mylogo:hover span {
	background-position: 100px 300px;
}

效果是這樣的：

如果仔細觀察，會發現背景圖更加契合光影掠過的效果，因為linear-gradient每個漸變點在不同分辨率的屏幕下并不統一，也就是說在高分辨下會出現殘缺光斑。

暗黑模式下的效果是這樣的：

看起來似乎更加有質感一點，除此之外，也許你還想利用transition玩一些更加刺激的效果：

.mylogo:hover {
            -webkit-transform: rotate(666turn);
			transform: rotate(666turn);
			transition-delay: 1s;
			transition-property: all;
			transition-duration: 59s;
			transition-timing-function: cubic-bezier(.34, 0, .84, 1)
}

讓我們旋轉、跳躍、閉著眼：

結語：兩套方案都可以很好的實現光影特效，區別在于linear-gradient并不會消耗網站的帶寬，但會消耗電腦的CPU和內存，而與背景漸變相比，背景圖像效果會更好一點，但是將會更多地使用網絡帶寬，而webp技術又可以幫助我們對圖片進行極致的壓縮(參見：https://v3u.cn/a_id_190)，所以我們可以理解這是一種權衡，畢竟，書本上寫的是道理，但是現實中講究的是取舍，不是嗎?

在線咨詢

上一篇：“開發一個靜態 HTML 頁面，我要價 12 萬，有錯嗎
下一篇：什么是HTML？一文讓你理解HTML的含義

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML中實現鼠標移動到table中某個單元格中顏色改變

html中，我們經常會用到table布局；有時候需要實現指定單元格，當鼠標移動到上面的時候，該單元格背景變色，不是該行背景變色，也不是僅僅文字的背景變色；

您的項目需求