diff --git a/src/app/services/field-interaction.service.ts b/src/app/services/field-interaction.service.ts
index eb0ca1f..94e2538 100644
--- a/src/app/services/field-interaction.service.ts
+++ b/src/app/services/field-interaction.service.ts
@@ -1,32 +1,33 @@
 import { Word } from '../models/word';
 import {EventEmitter} from '@angular/core';
 import {Subject} from 'rxjs';
 
 export class WordService {
 
   onHoveredWord = new EventEmitter<Word>();
+  offHoveredWord = new EventEmitter<Word>();
   oldClickedWord: Word;
   onClickedWord = new EventEmitter<Word>();
 
   private informationSource = new Subject<Word>();
   wordChange$ = this.informationSource.asObservable();
 
   updateInfo(information: Word) {
     this.informationSource.next(information);
   }
 
   public onClickService(word: Word) {
     if ( word !== this.oldClickedWord) {
       this.onClickedWord.emit(word);
       this.oldClickedWord = word;
     }
   }
 
   public mouseEnterService(word: Word) {
     this.onHoveredWord.emit(word);
   }
 
   public mouseLeaveService(word: Word) {
-    this.onHoveredWord.emit(word);
+      this.offHoveredWord.emit(word);
   }
 }
diff --git a/src/app/textfield-component/textfield.component.css b/src/app/textfield-component/textfield.component.css
index 1f3b76f..6378aac 100644
--- a/src/app/textfield-component/textfield.component.css
+++ b/src/app/textfield-component/textfield.component.css
@@ -1,22 +1,27 @@
 .textfield {
   background-color: #DADADA;
 }
 
 .textfield .unhighlighted {
   opacity: 0.0;
 }
 
 .textfield .highlight {
   fill: #e2fa00;
   opacity: 0.3;
 }
 
 .textfield .howered_line {
   fill: #fa301c;
   opacity: 0.3;
 }
 
 .textfield .same_word {
   fill: #c9fac5;
   opacity: 0.3;
 }
+
+.text_fadeout {
+  fill: #a4a4a4;
+}
+
diff --git a/src/app/textfield-component/textfield.component.html b/src/app/textfield-component/textfield.component.html
index 3f3930c..1c31f46 100644
--- a/src/app/textfield-component/textfield.component.html
+++ b/src/app/textfield-component/textfield.component.html
@@ -1,23 +1,30 @@
+<div>onhovered: {{hoveredWord?.text}}</div>
+<div>offhovered: {{offHoveredWord?.text}}</div>
+
 <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    [attr.viewBox]="viewBox" [attr.height]="svg_height" [attr.width]="svg_width"
-   [ngClass]="{'textfield': true}">
+    class = 'textfield'>
    <svg:g *ngIf="image">
       <image [attr.xlink:href]="image.file_name" x="0" y="0" [attr.height]="image.height" [attr.width]="image.width"/>
    </svg:g>
    <svg:g *ngFor="let word of words">
      <svg:g *ngIf="!image">
-         <svg:text [attr.x]="word.left+2" [attr.y]="word.top+word.height/2+3"  [attr.textLength]="word.width-4" lengthAdjust="spacingAndGlyphs">
+         <svg:text [attr.x]="word.left+2"
+                   [attr.y]="word.top+word.height/2+3"
+                   [attr.textLength]="word.width-4"
+                   lengthAdjust="spacingAndGlyphs"
+                   [ngClass]="{'text_fadeout': assignClass(2, word) }">
             {{word.text}}
          </svg:text>
       </svg:g>
       <svg:rect [interactedWord]="word"
                 [ngClass]="{
                   'textfield unhighlighted': true,
-                  '.textfield highlight': assignClass(0, word),
-                  '.textfield howered_line': assignClass(1, word)
+                  'textfield highlight': assignClass(0, word),
+                  'textfield howered_line': assignClass(1, word)
                   }"
                 [attr.x]="word.left" [attr.y]="word.top" [attr.height]="word.height" [attr.width]="word.width">
          <title>{{word.text}}</title>
      </svg:rect>
    </svg:g>
 </svg>
diff --git a/src/app/textfield-component/textfield.component.ts b/src/app/textfield-component/textfield.component.ts
index 01b0515..d6c1d85 100644
--- a/src/app/textfield-component/textfield.component.ts
+++ b/src/app/textfield-component/textfield.component.ts
@@ -1,71 +1,89 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { Word } from '../models/word';
 import wordData from '../../assets/W_II_1_page131.json';
 import { WordService } from '../services/field-interaction.service';
 
 @Component({
    selector: 'text-field',
    templateUrl: './textfield.component.html',
    styleUrls: ['./textfield.component.css']
 })
 export class TextFieldComponent implements OnInit {
    @Input() image;
    @Input() text_field;
    svg_width: number = 600;
    svg_height: number = 800;
    svg_left: number = 0;
    svg_top: number = 0;
    viewBox: string = '';
    words: Word[];
    clickedWord?: Word;
-   howeredWord?: Word;
+   hoveredWord?: Word;
+   offHoveredWord?: Word;
 
    constructor( private wordservice: WordService ) {
       this.words = wordData;
    }
 
    ngOnInit() {
       if (this.text_field != null){
          this.svg_left = this.text_field.left;
          this.svg_top = this.text_field.top;
          this.svg_width = this.text_field.width;
          this.svg_height = this.text_field.height;
-      } else if (this.image != null){
+      } else if (this.image != null) {
          this.svg_width = this.image.width;
          this.svg_height = this.image.height;
       }
       this.viewBox = this.svg_left + ' ' +  this.svg_top + ' ' + this.svg_width + ' ' + this.svg_height;
       // console.log(this.viewBox)
 
       this.wordservice.onClickedWord.subscribe(
        (changedWord: Word ) => this.clickedWord = changedWord
       );
 
       this.wordservice.onHoveredWord.subscribe(
-       (changedWord: Word ) => this.howeredWord = changedWord
+       (changedWord: Word ) => this.hoveredWord = changedWord
+     );
+
+      this.wordservice.offHoveredWord.subscribe(
+       (changedWord: Word ) => { this.offHoveredWord = changedWord; }
      );
    }
 
     private assignClass(mode: number, word: Word) {
-      switch ( mode ) {
-        case 0:
-          if (typeof this.howeredWord !== 'undefined') { if (word === this.howeredWord) {
-            return true;
-          }}
-          break;
+      if (typeof this.hoveredWord !== 'undefined' && this.hoveredWord !== null && this.hoveredWord !== this.offHoveredWord ) {
+        switch (mode) {
+          case 0:
+              if (word === this.hoveredWord && word !== this.offHoveredWord) {
+                return true;
+              }
+              break;
 
-        case 1:
-          if (typeof this.howeredWord !== 'undefined') {
+          case 1:
             if (word.hasOwnProperty('row')) {
-              if (word.row === this.howeredWord.row && word.id !== this.howeredWord.id ) {
+              if (word.row === this.hoveredWord.row && word.id !== this.hoveredWord.id) {
                 // console.log(word.text + ' has also row == ' + word.row);
                 return true;
               }
             }
-          }
-          break;
+            break;
+
+          case 2:
+              if (word.hasOwnProperty('row')) {
+                if (word.row === this.hoveredWord.row) {
+                  return false;
+                } else {
+                  return true;
+                }
+              } else {
+                if (word !== this.hoveredWord ) {
+                  return true;
+                }
+              }
+        }
       }
   }
 
 
 }
diff --git a/src/app/textfield-component/word-position.directive.ts b/src/app/textfield-component/word-position.directive.ts
index d3ac3bc..cea7f3a 100644
--- a/src/app/textfield-component/word-position.directive.ts
+++ b/src/app/textfield-component/word-position.directive.ts
@@ -1,25 +1,27 @@
 import { Directive, ElementRef, HostBinding, HostListener, Input } from '@angular/core';
-import { Subscription }   from 'rxjs';
-import { InfoService } from '../services/info.service';
 import { WordService } from '../services/field-interaction.service';
 import { Word } from '../models/word';
 
 @Directive({
    selector: '[interactedWord]'
 })
 export class WordPositionDirective {
    @Input('interactedWord') interactedWord: Word;
 
    constructor(private wordserice: WordService) {}
 
    @HostListener('click') onMouseClick() {
       // alert(this.word);
       this.wordserice.updateInfo(this.interactedWord);
       this.wordserice.onClickService(this.interactedWord);
    }
 
    @HostListener('mouseenter') onMouseEnter() {
      this.wordserice.mouseEnterService(this.interactedWord);
    }
 
+   @HostListener('mouseleave') onMouseLeave() {
+     this.wordserice.mouseLeaveService(this.interactedWord);
+   }
+
 }