header

src/app/header/header.component.html

@@ -1,6 +1,6 @@
 <div [ngClass]="[mode]" class="header">
     <div>
-        <h1>Ipv4 Converter</h1>
+        <h1 #hover (mouseenter)="onMouseEnter(hover)" (mouseleave)="onMouseOut(hover)">Ipv4 Converter</h1>
         <mat-slide-toggle class="toggle" (toggleChange)="stylemode()">{{toggleText}} </mat-slide-toggle>
     </div>
 

src/app/header/header.component.ts

@@ -13,6 +13,15 @@ export class HeaderComponent implements OnInit {
 
 
 
+  }
+
+  onMouseEnter(hover: HTMLElement) {
+    hover.style.color = "red";
+
+  }
+  onMouseOut(hover: HTMLElement) {
+    hover.style.color = "black";
+
   }
   stylemode() {
     switch (this.toggle) {

src/app/output/output.component.html

@@ -1,3 +1,4 @@
+<div class="body">
     <div class="card">
         <label class="label">Ipv4</label>
         <div>
@@ -52,3 +53,4 @@
             <p><label>{{service.bin_dec_dict.LastIP.bin}}</label></p>
         </div>
     </div>
+</div>

src/app/output/output.component.scss

@@ -14,6 +14,7 @@
     margin-left: 5px;
     margin-right: 5px;
 
+
 }
 
 .label {
@@ -26,7 +27,3 @@
     width: 20px;
     margin-right: 100px;
 }
-
-body {
-    background-color: black;
-}