Crossed hover effect on rows and columns

cross-hover.css

.cross-hover {
	overflow: hidden;
}

	.cross-hover tr:hover,
	.cross-hover tr:focus {
		background: rgba(191,148,86,.25); /* whatever color you like */
	}

		.cross-hover thead tr,
		.cross-hover tfoot tr {
			background: none !important;
		}

	.cross-hover th,
	.cross-hover td {
		outline: 0;
		overflow: visible;
		position: relative;
		vertical-align: middle;
		z-index: 5;
	}

	.cross-hover td {
		font-size: 0px;
		line-height: 0;
		text-align: center;
	}

		.cross-hover td:hover,
		.cross-hover thead th:hover,
		.cross-hover tfoot th:hover,
		.cross-hover td:focus,
		.cross-hover thead th:focus,
		.cross-hover tfoot th:focus {
			z-index: 1;
		}

			.cross-hover td:hover:before,
			.cross-hover thead th:hover:before,
			.cross-hover tfoot th:hover:before,
			.cross-hover td:focus:before,
			.cross-hover thead th:focus:before,
			.cross-hover tfoot th:focus:before {
				background: rgba(191,148,86,.25); /* whatever color you like */
				content: '';
				display: block;
				font-size: 15px;
				font-size: 1rem;
				height: 9000px;
				left: 0;
				position: absolute;
				speak: none;
				top: -4500px;
				width: 100%;
				z-index: -1;
			}