如何突出某个地方有“鼠标悬停”效应的事实?

时间:2013-09-07 09:22:20

标签: html css user-interface tooltip onmouseover

在我的网页上,我会有几个圈子与onmouse over效果(工具提示onmouse over)。我怀疑大多数访客会错过这个,因此想知道你通常做些什么来吸引访客的注意力/强调在某个地方有一个影响因素。

编辑澄清一下,我的问题是“如何向访问者表明对元素有工具提示效果”

非常感谢您的建议

3 个答案:

答案 0 :(得分:4)

这应该是您的设计/ UX所关注的内容,吸引用户注意页面中的特定元素以及页面的一般预期体验。

通常工具提示标有图标(?等),用文字装饰突出显示或者再次是设计的明显部分,它们在那里帮助用户,他们不能使用他们不知道的东西在那里

如果它们不是基于信息且是交互式元素,则可以始终对它们应用静态CSS动画(使用循环@keyframe动画),例如使它们巧妙地叮当,发光,移动或突出显示。

这些元素也应该足够大,以便用户能够查看和交互,但不会超过其他网站内容,除非它们是主要功能,在这种情况下,它们肯定需要显而易见。

现在大多数用户都非常聪明地探索装饰精美的页面,但是互动元素需要某种突出或吸引他们。

答案 1 :(得分:2)

如果您想使用工具提示插件 http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/ 此链接有很多可供选择的工具提示插件,取决于您对网站的重视需求。

如果您想手动设置工具提示,将div设置为position:relative,并创建一个div:display:none;和位置:绝对; (在html方面,它必须在父div的标签之间)并使用悬停创建一个jquery命令并切换工具提示。

答案 2 :(得分:0)

虽然编码怪物的网站非常好,但我认为他正在寻找一些可以看出用鼠标悬停它时有什么东西的东西。

您的问题有几种解决方案:
- 略微动画的东西(不是annonying),例如一个脉动按钮
- 单调的背景和清晰可见的边框或类似的东西围绕可悬挂元素传达这个区域是特殊的(如Bing所做的)
- 任何类型的小文本,符号等 - 如果它们在悬停文本时出现,您也可以对其进行格式化(虚线下划线等)
- 某种发光边框(可能只在移动鼠标时发光)
- ......

最后,提示:
为了避免误解,请澄清未来的问题,以便每个人都能得到他们的意图,因为这个问题并不是很清楚(至少对我来说,我不确定我是否覆盖了你想要的东西)。