css如何让鼠标指到的单元格变色

html-css036

css如何让鼠标指到的单元格变色,第1张

利用链接<a>及a：hover改变单元格的css样式。

:hover 选择器用于选择鼠标指针浮动在上面的元素。

提示：:hover 选择器可用于所有元素，不只是链接。

提示：:link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面的链接，:active 选择器用于活动链接。

注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。

<style type="text/css">

<!--

a:link {

color: #11ef06

text-decoration: none

}

a:hover {

font-size: 14px

font-weight: bold

color: #CC3300

text-decoration: none

}

给整个table加个DIV的外框，table不用设置边框。给整个DIV设置左上右的边框（这里是设置外框）。给table的TD伪类设置右下的边框（这是里面边框的颜色）。定义最右边的那个TD不要右边的边框。这是笨办法。

推荐你用UL LI的无序列表做表格，给UL一个背景色一个边框色，背景色是里面表格线的颜色。里面的LI之间给一像素的间距。

下面来个例子，你可以复制到你的编辑器里修改测试

<style type="text/css">

table.gridtable {}{

    font-family: verdana,arial,sans-serif

    font-size:11px

    color:#333333

    border-width: 1px

    border-color: #666666

    border-collapse: collapse

}

table.gridtable th {}{

    border-width: 1px

    padding: 8px

    border-style: solid

    border-color: #666666

    background-color: #dedede

}

table.gridtable td {}{

    border-width: 1px

    padding: 8px

    border-style: solid

    border-color: #666666

    background-color: #ffffff

}

</style>

<!-- Table goes in the document BODY -->

<table class="gridtable">

<tr>

    <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>

</tr>

<tr>

    <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>

</tr>

<tr>

    <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>

</tr>

</table>

CSS（层叠样式表）级联样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。