鼠标悬停在整行背景色代码上的CSS实现

鼠标悬停在整行背景颜色更改代码上的CSS实现:

在新闻列表的形式不居中时，为了清楚地区分每行，通常当鼠标悬停在一行上时，可以更改当前行的整行颜色，下面的代码示例简要介绍了如何实现此效果的代码如下:

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落title>
head>
<body>
<style type="text/css">
a.menulink 
{
  display:block;
  width:198px;
  text-align:left;
  text-decoration:none;
  font-family:arial;
  font-size:12px;
  color:#000000;
  border:none;
  border:solid 1px #ffffff;
}
a.menulink:hover 
{
  background-color:#f0e1ff;
}
style>
<table border="0" width="198">
  <tr>
    <td width="100%"><a href="#" class="menulink">蚂蚁部落一a>td>
  tr>
  <tr>
    <td width="100%"><a href="#" class="menulink">蚂蚁部落二a>td>
  tr>
  <tr>
    <td width="100%"><a href="#" class="menulink">蚂蚁部落三a>td>
  tr>
table>
body>
html>

在上面的代码中，当鼠标悬停在行上时，可以更改整行的颜色. 这是一个简短的介绍.

1. 实施过程:

a元素通过display: block转换为块级元素，以便可以设置其大小.

a.menulink: 表示a标签中其类属性值为menulink的元素.

a.menulink: hover: 当鼠标悬停在链接上时，在a标签中设置其类属性值为menulink的元素的样式.

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/bofangqi/article-300789-1.html