Унікальні ефекти при наведенні: як виділити перший рядок тексту

4 Березня 2024 в 16:31 38

У сучасному веб-дизайні інтерактивність сторінки є ключовим фактором залучення уваги користувача. Одним із способів підвищення інтерактивності є додавання ефектів при наведенні курсора миші, зокрема, зміна стилів тексту. Втім, задача зміни стилю лише першого рядка абзацу при наведенні може здатися неочевидною, адже CSS наразі не надає прямої підтримки для визначення подій наведення на псевдоелемент ::first-line.

Ця стаття розглядає метод, який дозволяє обійти обмеження CSS, використовуючи JavaScript або бібліотеку jQuery для створення ефекту виділення першого рядка тексту при наведенні курсора без необхідності наведення на весь абзац. Це дозволить вам додати більше динаміки та інтерактивності на веб-сторінки, підвищуючи залученість користувачів.

Виклик

Основна проблема полягає у тому, що стандарти CSS не дозволяють прямо виявляти події наведення на псевдоелементи, такі як ::first-line. Це означає, що стандартні методи, такі як p::first-line:hover, не будуть працювати для зміни стилів лише першого рядка при наведенні курсора на нього.

Рішення через JavaScript

Основна ідея рішення полягає у використанні JavaScript для динамічного визначення області першого рядка тексту і застосування стилів при наведенні курсора лише на цю область. Нижче наведено кроки, необхідні для реалізації цього ефекту:

Визначення події наведення на абзац (p).
Розрахунок позиції курсора відносно верхнього краю абзацу.
Застосування стилів до абзацу, якщо позиція курсора вказує на перший рядок.

Для демонстрації розглянемо наступний приклад коду на jQuery:

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
$(document).ready(function(){
  $("p").hover(function(e){
    var mouseY = e.pageY - $(this).offset().top;
    var lineHeight = parseInt($(this).css("line-height"));
    if(mouseY &lt;= lineHeight){
      $(this).css("font-weight", "bold");
    }
  }, function(){
    $(this).css("font-weight", "normal");
  });
});
&lt;/script&gt;

$(document).ready(function(){

$("p").hover(function(e){

var mouseY = e.pageY - $(this).offset().top;

var lineHeight = parseInt($(this).css("line-height"));

if(mouseY <= lineHeight){

$(this).css("font-weight", "bold");

}

}, function(){

$(this).css("font-weight", "normal");

});

</script>

У цьому прикладі, при наведенні курсора на абзац, скрипт перевіряє, чи знаходиться курсор у межах першого рядка (припускаючи, що висота рядка відповідає встановленому значенню line-height для абзацу). Якщо так, то до абзацу застосовується жирний стиль; коли курсор виходить за межі абзацу, стиль повертається до нормального.

Удосконалення

Попри свою простоту, вищенаведений метод може бути адаптований та удосконалений для врахування різних факторів дизайну, таких як різні розміри шрифту та висоти рядків. Наприклад, можна динамічно визначити висоту рядка за допомогою JavaScript і використовувати це значення для точнішого визначення області першого рядка.

Застереження

Використання JavaScript для стилізації може вплинути на продуктивність веб-сторінки, особливо якщо скрипт виконується на великій кількості елементів аб