內容簡介
在我的語言學習部落格中,我有一個功能,可以在滑鼠滑過時通過交換文本顯示內聯翻譯。這非常方便,我想讓它成為一個外掛,讓其他人也可以使用!
Hoverswap 可讓您創建交換元素,當用戶在其上懸停時,其內容將被交換為其標題。
非常適用於外語學習和翻譯網站。
使用方法
版本 1.0 沒有配置。稍後會添加配置功能。
目前,要使用該外掛,您需要創建一個包含您想要啟用的文本的 EM 標記,然後將其懸停狀態的文本放入其 title 屬性中。
然後,為了確保僅交換您想要交換的文本,您必須將其包裝在類別“translate”的元素中。
一個例子實現方式是創建以下無序列表:
<UL class=”translate”>
<LI><EM title=”How are you?”>Como estas?</EM></LI>
</UL>
功能
為包含元素添加“translate”類,如引用或 ul 標記,然後,任何具有標題屬性的 em 標記在移動鼠標時會自動交換其內容和 title 內容。
計劃功能:
允許指定任何標記或 classname 作為包含元素。
允許指定任何標記或 classname 作為翻譯元素。
外掛標籤
開發者團隊
原文外掛簡介
On my language-learning blog, I have a feature that shows a translation inline by swapping out text when the mouse rolls over it. It’s very handy, and it occurred to me that I should make it a plugin, so other people can use it too!
Hoverswap allows you to create swapping elements, whose content is swapped for its title when the user hovers over them.
Excellent for foreign language learning and translation web sites.
Use
Version 1.0 has no configuration. That will be added later.
For now, in order to use the plugin, you create an EM tag containing the text you want to be active, and then you put the text for its hover state into its title attribue.
Then, to ensure that only the text you WANT to be swapped gets swapped, you must wrap that in an element of the class “translate”.
One example implementation would be create the following unordered list:
- Como estas?
Features
Add the “translate” class to a containing element, such as a blockquote or a ul tag. Then, any em tags with a title attribute will automatically swap their content for the title when you move the mouse over them.
Planned features:
Allow any tag or classname to be specified as the containing element.
Allow any tag or classname to be specified as the translate element.
