如何在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文本上繪製一條線

回答

相關問題