CSS表格样式设计 - Hover效果实现

#body { background-image: url('/1/img/wallhaven-6oxgp6.jpg'); background-repeat: repeat; }

#tb { width: 1525px; border-collapse: collapse; border: 1px solid #020202; font-size: 20px; }

#tb th { background: #7f7c7c; border-bottom: 1px solid #dbdada; padding: 30px; }

#tb td { border: 1px solid #070707; padding: 4px; text-align: center; }

#tb .bgc { background: rgb(236, 62, 62); }

#tb .bgc:hover { background: rgb(255, 94, 94); }

#tb .bgy { background: rgb(236, 236, 62); }

#tb .bgy:hover { background: rgb(255, 255, 94); }

#tb .bgg { background: rgb(62, 236, 62); }

#tb .bgg:hover { background: rgb(94, 255, 94); }

#tb .bgp { background: rgb(236, 62, 236); }

#tb .bgp:hover { background: rgb(255, 94, 255); }

#tb .bgb { background: rgb(62, 62, 236); }

#tb .bgb:hover { background: rgb(94, 94, 255); }

.btn { background-color: #3b3b3b; border: none; color: white; padding: 10px 20px; text-align: center; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 10px; }

.btn:hover { background-color: #616161; }