怎么实现鼠标悬停显示图片且不影响原有布局？

lm_midsummer 2019-04-18 09:26:30

用了hover display中的none和block 但是会影响原有布局

...全文

852 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

囧 2019-04-19

打赏
举报

上级标签设置position:relative, 图片设置position:absolute

努力，加油，奋斗 2019-04-18

打赏
举报

可以把display:none改成用visibility 设置为 hidden; 或者把显示的div进行浮动

yepp13 2019-04-18

打赏
举报

引用楼主 qq_44940977的回复:

用了hover display中的none和block 但是会影响原有布局

把显示图片用的div固定宽高

源码使用盒子弹性居中布局，根据图片大小自动换行、渐变背景、元素的相对、绝对定位，开启3D效果、视距、图片保持原有尺寸裁切、鼠标悬停图片180度旋转、文字偏移、字体大小、颜色、内边距、字间距等。附有详细注释说明。网页效果编辑工具：VScode Dw等前端网页编辑工具均可。

注意：有同学发现RP 9在选中元件，不能快速键入文字了。只能双击才能输入。这是因为RP9增加了一个新功能。在版本9开发过程中，我们的主要目标之一是使Axure RP 更快。为了达到这一目标，我们做了许多重要的性能改进和UI优化，并且它还为我们提供了单键快捷方式。只需按一个字母按键，然后单击并拖动就可以生成相应类型的窗口小部件。单键快捷键功能可以在偏好设置里关闭。关闭该功能后，选中元件时键入文字，会在该元件上快速添加文本（恢复成RP8版本时那样）。但这种快捷输入有个BUG，输入中文时，第一个字符会变成字母。因为还没变成输入状态，中文输入法都没启动。所以。。你就别关闭这个功能了。界面布局改版 AxureRP 9.0在极简主义设计的道路上越走越远，整个界面的颜色搭配与icon图标设计给人的感觉更简洁、更朴素，没有太多的附加装饰。 1. 界面的主色调采用了极简主义色调黑白灰。 2. 所有的输入项填写均由以前的输入框形式调整成了输入线。 3. 生成原型的设置界面，由原来竖行的菜单栏调整成了右侧的标签导航，左侧为路径、浏览器、默认页面的设置。改变后的界面，可以减少用户的操作，我们只需要在一个界面窗口中完成所有的配置。 4. 丰富了钢笔工具的功能，工具栏的插入功能不仅保留了原有的钢笔工具，还增加了矩形、椭圆、线条、文本以及各类形状。通过拖拽可以直接绘制各类形状并随心所欲的控制尺寸大小。 5. 工具栏中默认收起了上下对齐方式、元件排列方式，点击双箭头图标进行展开。 6. 工具栏中将文本对齐方式进行了隐藏，点击双箭头展开。 7. 工具栏中去除了尺寸设置和固定元件操作。 8. 页面导航面板与元件管理面板进行了合并。 9. 元件库面板与母版面板进行了合并。 10. 针对Icons库中满目庞杂的元件进行了归类。 11. 样式面板中的样式交互移入至元件交互中。元件功能优化虽说AxureRP 9.0并没有增加新的元件，但9.0的元件使用体验及增加的小功能却超出了我的预期。在进行线框图的绘制时，更加得心应手了，极大了提高设计的效率与线框图质量。 1. 方框、椭圆、占位符、BUTTON按钮等形状类元件增加了导入图片功能，这里的图片导入不同于图像元件的图片导入，通过形状元件导入的图片将限定在元件内部。 2. 可以灵活控制文本内容的边距，即文字距离元件上下左右四条边的距离。 3. 导入图片时，能够设置图片的中心点，默认为左上角，可以选择顶部、底部、左上角、左下角、右上角和右下角。 4. 图片支持水平翻转、垂直翻转。 5. 元件不仅可以设置外部阴影，也可以设置内部阴影。 6. 边框线的粗细可以通过的宽度进行更灵活的设置，只需要填写数字即可。 7. 布尔运算增加了结合和分开。 8. 移动元件时，自动显示距离最近元件的距离。 9. 增加了流程图的元件。 10. 针对Icons元件库的元件进行了整理分类，元件的数量也更丰富。 11. 元件增加悬停样式效果，鼠标悬停时，元件周围显示边框线。 12. 优化元件选中效果。 13. 编辑动态面板和中继器时，减少了页面标签的数量，优化编辑体验，新增隔离功能。 14. 文本字符的行距和间距的调整更加精确灵活。 15. 元件库支持导入本地图片文件夹。 16. 元件支持添加多条注释说明，在查看HTML文件时，可一次性展开所有说明。 17. 中继器背景支持颜色交替显示。交互设置流程优化新的交互构建器已经过全面重新设计和优化，易于使用。从基本设置到复杂的中继器、函数、条件流，可以在更短的时间内以更少的点击次数将你的原型变为现实。具体的变化表现在以下几点： 1. 交互事件默认进行了隐藏处理，点击新建交互，才可以查看交互事件。 2. 交互用例的设置更加流水化，每点击一步操作自动触发下一步的设置，这样设计的好处在于减少弹窗界面的数量，减少用户点击次数 3. 元件的交互样式移入至交互事件列表。 4. 每个元件的常用交互直接显示在交互面板下方，如中继器的每项载入时事件；如中继器的单击时，设置为下一个状态；向左拖动结束时，显示为上一个状态；向右拖动结束时，显示为下一个状态。其它改进 1. 调色板增加了渐变色的灵活调整，支持线性渐变和径向渐变，增加HSV拾取器的新颜色选择器。 2. 页面样式新增移动端尺寸，包含了安卓与IOS主流机型尺寸。 3. 画布取消了滚动栏（可能有些同学不适应了），增加负屏显示。 4. 帮助菜单栏新增Axure官方论坛。 5. 优化浏览器中原型显示效果，新增自适应浏览器宽度，增加上一页（）的快捷方式。 6. 浏览器中查看移动端原型时，优化光标显示效果，增加上下滚动条。最后的小结从整体上来看，AxureRP 9.0针对8.0的版本迭代还是做出了很大的改进，简洁的界面设计，元件的新增功能，以及

其实现在大多报表工具都支持格子中写 html。在报表工具中实现鼠标悬停显示图片的需求，也只需要在报表里增加一个图层的定义，在对应的格子上挂上 html 事件，通过 JS 的 show()hide() 就可以轻松实现，显示的图片也可以根据指向的对象不同，动态显示出不同的图片信息，而且不会影响原有数据呈现的布局，具体实现可以参考下这篇文章的例 鼠标悬停显示图片。 ...

在网页中我们经常会在页面上鼠标悬停时看到一些动效，例如图片跟随鼠标点击放大、懒加载等，这个交互细节在各个主流网站中随处可见，能为网站增添个性亮点。背景在我们的日常项目中，也会遇到这样的需求，在当前环境下，此类效果大多是靠jQuery来实现的，但是用jQuery实现有不少毛病，原因如下： 1.jQuery里面封装了各种函数，整个框架相对比较重; 2.jQuery没有分割模块，只有全部导入; 3.jQuery压缩后的jq包都有91kB，和css对比来说这样的页面加载速度区别很大; 那么我们用cs

关于小王同学大前端的学习生涯

CSS

61,112

社区成员

60,730

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章