Hover over row

static/css/index.css

@@ -19,6 +19,8 @@
 	--record-TXT: #86bbd8;
 	--record-NXDOMAIN: #aa0000;
 	--record-other: #888;
+
+	--record-hover: #fffff8;
 }
 
 html {
@@ -221,6 +223,10 @@ button {
 				height: 100%;
 				align-items: center;
 
+				&.mouse-over {
+					background-color: var(--record-hover);
+				}
+
 				&.created {
 					* {
 						color: #44aa00 !important;
@@ -254,6 +260,10 @@ button {
 				align-content: center;
 				cursor: pointer;
 
+				&.mouse-over {
+					background-color: var(--record-hover);
+				}
+
 				div {
 					background-color: var(--record-other);
 					color: #fff;
@@ -301,6 +311,10 @@ button {
 				padding: 0px 8px;
 				height: 100%;
 				align-content: center;
+
+				&.mouse-over {
+					background-color: var(--record-hover);
+				}
 			}
 
 			.ttl {
@@ -311,16 +325,11 @@ button {
 				padding: 0px 8px;
 				height: 100%;
 				align-content: center;
-			}
 
-			.separator {
-				grid-column: 1 / -1;
-
-				&:not(:last-child) {
-					border-bottom: 1px solid var(--line-color-record);
+				&.mouse-over {
+					background-color: var(--record-hover);
 				}
 			}
-
 		}
 
 	}

static/js/dns.mjs

@@ -357,6 +357,15 @@ class Record {
 			this.divValue.classList.add('value')
 			this.divTTL.classList.add('ttl')
 
+			this.divFQDN.addEventListener('mouseenter', ()=>this.mouseEnter())
+			this.divFQDN.addEventListener('mouseleave', ()=>this.mouseLeave())
+			this.divType.addEventListener('mouseenter', ()=>this.mouseEnter())
+			this.divType.addEventListener('mouseleave', ()=>this.mouseLeave())
+			this.divValue.addEventListener('mouseenter', ()=>this.mouseEnter())
+			this.divValue.addEventListener('mouseleave', ()=>this.mouseLeave())
+			this.divTTL.addEventListener('mouseenter', ()=>this.mouseEnter())
+			this.divTTL.addEventListener('mouseleave', ()=>this.mouseLeave())
+
 			this.divType.innerHTML = `<div></div>`
 			this.divFQDN.innerHTML = `
 				<span class="subdomains">*.</span>
@@ -397,6 +406,19 @@ class Record {
 
 		return [this.imgIcon, this.divFQDN, this.divType, this.divValue, this.divTTL]
 	}// }}}
+	mouseEnter() {
+		this.divFQDN.classList.add('mouse-over')
+		this.divType.classList.add('mouse-over')
+		this.divValue.classList.add('mouse-over')
+		this.divTTL.classList.add('mouse-over')
+	}
+	mouseLeave() {
+		this.divFQDN.classList.remove('mouse-over')
+		this.divType.classList.remove('mouse-over')
+		this.divValue.classList.remove('mouse-over')
+		this.divTTL.classList.remove('mouse-over')
+	}
+
 	save() {// {{{
 		const created = (this.id() == '')