Примените определенный .class к кнопке JavaScript И избегайте смещения текста

Question

Здесь - это JSFiddle с кодом.

Цель: нажатие кнопки должно применяться .blur_filter_off к классу span id="hint" только, Весь текст должен оставаться как есть, то есть в строке 1 .

Текущие проблемы: 1) нажатие кнопки отключает свойство display:none вместо применения .blur_filter_off учебный класс. 2) Текст разбивается на 2 строк при нажатии кнопки.

Дополнительная информация: не уверен display:none необходимо в общем , так как Идея заключается в следующем: span id="hint" - это , изначально размыто в классе blur_filter_on и становится не размытым при нажатии кнопки в классе blur_filter_off. Возможно, есть способ сделать это, не реализовав свойство display:none.

function showHint(id1) {

  var x = document.getElementById(id1).style;

  x.display = (x.display != "block") ? "block" : "none";

}

.example {
  color: #1f2c60;
  font-size: calc(0.7em + 2.3vw);
}

.blur_filter_on {
  filter: blur(0.35em);
}

.blur_filter_off {
  animation-name: blur_decrease;
  animation-timing-function: ease;
  animation-duration: 1s;
}

@keyframes blur_decrease {
  from {
    filter: blur(0.35em);
  }
  to {
    filter: blur(0);
  }
}

<div>
  <span class="example"><span class="blur_filter_on"><span id="hint">This is</span> the sentence i use as an</span> example.</span>
</div>

<a class=hint href="#" onclick="showHint('hint')">BUTTON</a>

Answer 1

Вот решение, которое будет работать для достижения указанной вами цели. Я использую простой javascript здесь, вы также можете использовать jQuery для достижения этой цели. Требуется также настроить HTML и CSS.

Обновленная рабочая скрипка - здесь

function showHint(id1) {
  var x = document.getElementById(id1);
  var blurOffClass = "blur_filter_off";
  
  if (!x.classList.contains(blurOffClass)) {
     x.classList.add(blurOffClass);
  }
}

.example {
  color: #1f2c60;
  font-size: calc(0.7em + 2.3vw);
}

.blur_filter_on > * {
  filter: blur(0.35em);
}

.blur_filter_off {
  animation-name: blur_decrease;
  animation-timing-function: ease;
  animation-duration: 1s;
  filter: blur(0);
}

@keyframes blur_decrease {
from { filter: blur(0.35em); }
to { filter: blur(0); }
}

<div>
  <span class="example">
    <span class="blur_filter_on">
        <span id="hint">This is</span>
        <span>the sentence i use as an</span>
    </span>
    example.
  </span>
</div>

<a class=hint href="#" onclick="showHint('hint')">BUTTON</a>