只是想知道是否有人有这方面的经验。
我在纯HTML中有一些带有一些缩写的纯文本。现在我想知道在重复这些时我是否可以有一个悬停弹出窗口。这些悬停的数据已作为数组存储在JSON中,可以使用我已创建但无法链接的函数进行拉取。
无论如何,我可以通过CSS做到这一点吗?
示例代码:
JSON:
[{"Title":"DALE","FullName":"Dynamic Alternative Learning Environment"},{"Title":"EU15","FullName":"EU-15: Austria, Belgium, Denmark, Finland, France, Germany, Greece, Ireland, Italy, Luxembourg, the Netherlands, Portugal, Spain, Sweden and the United Kingdom"}]
HTML:
<p class="normal"><u class="abbreviation">EU15</u> countries, however, there are high rates of avoidable mortality and low levels of <u class="abbreviation">DALE</u>. Also Portugal is among the countries in Europe with the highest prevalence of <u class="abbreviation">HIV</u>This chapter also provides details of the health status of the population in order to understand the specific challenges the health system faces. Considerable health improvements can be seen in recent decades. The mortality rate declined more than 0.8 percentage points since 1975. This trend reflects both improved access to an expanding health care network, thanks to continued political commitment, and economic growth, which led to improved living standards and increasing investment in health care. Despite the overall improvements, there are inequalities in health among the regions and between social groups. Since the mid 1980s, the main causes of death have been diseases of the circulatory system, cerebrovascular disease and malignant neoplasms. These are likely to remain the main causes of death of the Portuguese population for the coming decades. Relative to other infection.</p>
答案 0 :(得分:1)
对于你想要的东西可能有点过分,但我在这里与我的小组经理做了类似的事情:
http://depressedpress.com/javascript-extensions/dp_panelmanager/
它已经过时但很有效。这里使用它进行弹出窗口定义的例子(WordPress不允许脚本):
http://home.comcast.net/~kiwidust/JSExtensions/DP_PanelManager/Example4.htm
该页面上的实际HTML看起来很像你的:
<p>The <a name="Def">Wii</a> allows you to download games via the "Store" channel from the <a name="Def">Wii</a> main menu. The <a name="Def">PlayStation 3</a> provides a similar service via <a name="Def">PSN</a> while the <a name="Def">XBox 360</a>, as always, has <a name="Def">XBL</a>.</p>
函数“init()”(加载onload事件)找到所有“Def”名称 - 我使用了getElementsByName,你使用getElementsByClassName来收集元素。对于每个元素,它添加了mouseover和mouseout事件处理程序。鼠标悬停处理程序然后调用“Load Definitions()”函数,这个函数大多只是一个带有定义的大“case”语句(你可能想直接访问解析的JSON对象)。
查看面板管理器上的选项以及鼠标悬停和鼠标移动事件中的用法 - 我引入了带有动画不透明度更改的定义,但您可以非常轻松地使用大小更改,幻灯片或任何您喜欢的内容。
希望这有帮助!