Как построить линию над текстом html

-1

Я хочу визуально соединить два слова на странице html с линией. Как это сделать?Как построить линию над текстом html

В идеальном сценарии я мог навести курсор на слово или текст, а другое слово загорается/меняет фон/подключается к линии. Пара слов может храниться в таблице на стороне сервера. Или это может быть просто очередное появление того же слова, для упражнений.

источник

2016-07-29 steffen

Попробуйте JavaScript. – Randy

@ randy: Продумайте пожалуйста. – steffen

Вы можете выполнить это, используя методы jQuery's hide() и show().

Вам нужно иметь изображение линии, которое вы можете скрыть с помощью hide() при загрузке страницы.

Тогда вам нужно иметь 2 слова (2 текстовых элемента). Итак, когда вы нажимаете 1-ое слово/элемент, вам нужно вызвать метод show(), чтобы показать скрытое изображение, которое соединяет вас с другим элементом.

Вы также можете использовать эффекты анимации jQuery на линии. :)

источник

2016-07-29 20:55:40

Вы можете использовать JQuery (или простой JS, но JQuery делает это легко), чтобы оживить ваши пожелания.

В этом примере, если вы наведите указатель мыши на тег u, тег i становится подчеркнутым. Для получения дополнительных эффектов попробуйте некоторые правила CSS, которые вам нравятся, например, теневое поле и т. Д.

Чтобы сделать соединительную линию между словами, это не будет так просто. Попытайтесь понять, что здесь происходит сначала, изучите javascript (мне нравится YouTube для этого) и шака!

В следующий раз, если вы зададите такой вопрос, мы ожидаем небольшой исследовательской работы, хотя по этой причине я еще не ответил. Удачи вам в этом!

$('u').on('mouseenter', function(){ 
 
    $('i').css('text-decoration', 'underline'); 
 
}); 
 

 
$('u').on('mouseleave', function(){ 
 
    $('i').css('text-decoration', 'none'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p> Hover over <u>this</u> word to highlight <i>this</i> word </p>

Если вы хотите запустить это в вашем браузере на компьютере, создайте файл с именем index.html и поместить его туда:

<html> 
<head> 
    <title>JQuery example</title> 
</head> 
<body> 

    <p> Hover over <u>this</u> word to highlight <i>this</i> word </p> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script> 
     $('u').on('mouseenter', function(){ 
     $('i').css('text-decoration', 'underline'); 
     }); 

     $('u').on('mouseleave', function(){ 
     $('i').css('text-decoration', 'none'); 
     }); 
    </script> 

</body> 
</html>

источник

2016-07-30 06:49:54 Randy

Как построить линию над текстом html

ответ

Смежные вопросы