CSS 如何實現當鼠標放在上面時整行變色呢？

時間 2020-02-08

標籤 css 如何實現鼠標放在上面整行變色欄目 CSS 简体版

原文原文鏈接

摘要:
下文講述css中實現鼠標放在指定行上面時，整行變色的方法分享，以下所示:css

實現思路:
使用:hover僞類，實現當鼠標指向時，其背景色發生相應的變化，以下例所示:

例：
下文中的div，當鼠標放上時，背景色發生相應的變化。 html

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>貓貓教程(www.maomao365.com)</title>
<style type="text/css">
div{
  overflow:hidden;
  white-space:nowrap;
  height:30px;
  width:250px; 
  background-color:white;
  color:black;
}

.divTest:hover{
  background-color:blue;
  color:white;
}

</style>
</head>
<body>
<div class="divTest">div 鼠標移上時,背景色發生變化</div>
</body>
</html>

相關閱讀:
CSS3 僞類:hover選擇器簡介說明
spa

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。