如何在HTML文本上绘制一条线

-1

我想在视觉上用一条线在html页面上连接两个单词。我如何实现这一目标？如何在HTML文本上绘制一条线

在理想情况下，我可以将鼠标悬停或点击文本中的单词，并且另一个单词点亮/更改背景/通过一条线连接。这些单词对可以存储在服务器端的表格中。或者为了练习，它可能仅仅是同一个单词的下一次出现。

来源

2016-07-29 steffen

尝试的JavaScript。 – Randy

@randy：请详细说明。 – steffen

您可以通过使用jQuery的hide()和show()方法来完成此操作。

您需要有一个线条图像，您可以在页面加载时使用hide()隐藏该图像。

然后你需要有2个单词（2个文本元素）。因此，当您单击第一个单词/元素时，您需要调用show()方法来显示将您连接到另一个元素的隐藏图像。

你也可以在行上使用jQuery动画效果。 :)

来源

2016-07-29 20:55:40

您可以使用JQuery（或简单的JS，但JQuery使这很容易）来动画您的愿望。

在此示例中，如果您将鼠标悬停在u标记上，则i标记会显示下划线。为了获得更多效果，请尝试一些您喜欢的阴影框等CSS规则。

要在单词之间建立连接线不会很容易。试着先了解这里发生的事情，学习JavaScript（我喜欢YouTube）和Shaka！

下一次，如果你问一个这样的问题，我们期望有一点研究的努力，那就是我没有回答的原因。祝你好运！

$('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文本上绘制一条线

回答

相关问题