HTML的style样式里的hover怎么设置在每一行？


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器的利用title>
    <style>
table{width:700px;margin:10px auto;border-collapse: collapse; background-color:#cccccc;border:1px #000
solid;text-align:center;font-weight: bolder;}

td,th{font-size: 14px;height: 20px;padding: 10px; border: #000 2px solid;color: red;}

td:nth-of-type(odd){background-color: #ffc;color: #60f;}

td:nth-of-type(even){background-color: #cf9; color:#00f;}

td,tr:hover{background-color: #3ff;}
    style>
head>
<body>
    <table>
        <tr>
            <th>图书th>
            <th>出版社th>
            <th>出版日期th>
            <th>价格th>
        tr>
        <tr>
            <td>c++程序设计td>
            <td>清华大学出版社td>
            <td>2016.1td>
            <td>35td>
        tr>
        <tr>
            <td>java程序设计td>
            <td>人民邮电出出版社td>
            <td>2017.6td>
            <td>43td>
        tr>
        <tr>
            <td>HTML实战教程td>
            <td>清华大学出版社td>
            <td>2018.9td>
            <td>39td>
        tr>
        <tr>
            <td>ASP.NET应用开发td>
            <td>机械工业出版社td>
            <td>2015.6td>
            <td>54td>
        tr>
        <tr>
            <td>c++程序设计td>
            <td>清华大学出版社td>
            <td>2016.1td>
            <td>35td>
        tr>
        <tr>
            <td>java程序设计td>
            <td>人民邮电出出版社td>
            <td>2017.6td>
            <td>43td>
        tr>
        <tr>
            <td>HTML实战教程td>
            <td>清华大学出版社td>
            <td>2018.9td>
            <td>39td>
        tr>
        <tr>
            <td>ASP.NET应用开发td>
            <td>机械工业出版社td>
            <td>2015.6td>
            <td>54td>
        tr>
        <tr>
            <td>c++程序设计td>
            <td>清华大学出版社td>
            <td>2016.1td>
            <td>35td>
        tr>
        <tr>
            <td>java程序设计td>
            <td>人民邮电出出版社td>
            <td>2017.6td>
            <td>43td>
        tr>
        <tr>
            <td>HTML实战教程td>
            <td>清华大学出版社td>
            <td>2018.9td>
            <td>39td>
        tr>
        <tr>
            <td>ASP.NET应用开发td>
            <td>机械工业出版社td>
            <td>2015.6td>
            <td>54td>
        tr>
    table>
body>
html>

img


如图是楼主想要的效果，楼主的代码只能实现第一行的鼠标悬停，但是楼主想从第二行开始每行都有这个效果，怎么搞呢？是哪里不对吗

要在每一行设置 hover 样式，需要将 tr:hover 修改为 tr:hover td，表示当鼠标悬停在每一行的单元格上时，设置样式。修改后的 CSS 代码如下：


table {
  width: 700px;
  margin: 10px auto;
  border-collapse: collapse;
  background-color: #cccccc;
  border: 1px #000 solid;
  text-align: center;
  font-weight: bolder;
}

td,
th {
  font-size: 14px;
  height: 20px;
  padding: 10px;
  border: #000 2px solid;
  color: red;
}

td:nth-of-type(odd) {
  background-color: #ffc;
  color: #60f;
}

td:nth-of-type(even) {
  background-color: #cf9;
  color: #00f;
}

tr:hover td {
  background-color: #3ff;
}

这样当鼠标悬停在每一行时，该行所有单元格的背景色都会变成蓝色。

css里加一句
tr:hover td{background:none;}

td,tr:hover{background-color: #3ff;}
tr:hover td{background:none;}