on(“mouseover') и on(”mouseout') jquery

27 декабря 2020, 02:40

Как сделать так, чтоб при наведении на некоторый текст, он изменялся, а при уходе курсора с него он становился таким, каким был до наведения курсора. Нужно чтобы он именно возвращал прежний текст с оформлением, а не записывал такой же на его место.

Answer 1

Например так:

.default { color: #045acf; font-weight: bold; } 
.hidden { color: #800; font-weight: bold; display: none;} 
 
.moo:hover .default {display: none;} 
.moo:hover .hidden {display: inline-block;}

<p class="moo"> 
  С точки зрения банальной эрудиции, <span class="default">каждый индивидуум</span><span class="hidden">не каждый сапиенс</span>, критически мотивирующий абстракцию, <span class="default">не</span> может игнорировать поляризаторы утопического субъективизма. 
</p>

Это могут быть и целые блоки текста:

.hidden {display: none;} 
 
.mama:hover .default {display: none;} 
 
.mama:hover .hidden {display: inline-block;}

<div class="mama"> 
  <p class="default">С точки зрения банальной эрудиции, каждый индивидуум, критически мотивирующий абстракцию, не может игнорировать поляризаторы утопического субъективизма.</p> 
  <p class="hidden">Lorem ipsum dolor amet...</p> 
</div>