javascript - 如何在鼠标悬停时将图像调整到每个站点?

标签 javascript css mouseover

在 JavaScript 或 CSS 中是否有调整图像大小的选项,以便图像向外扩展?鼠标悬停时图像的中心位置是否相同?

最佳答案

您需要能够使图像水平和垂直居中。这可以通过在图像上使用包装器 div 来完成,其中包含 display: table-celltext-align: centervertical-align: middle,然后在 :hover 上对图像应用一些额外的样式。

有关示例,请参阅此 fiddle :http://jsfiddle.net/jblasco/6qVnB/

可选地,而不是使用 display: table-cell,您可以手动找出一些边距或 position: relativetop 的组合> 在悬停时重新定位图像。

使用此解决方案的示例:http://jsfiddle.net/jblasco/fvqzR/2/

关于javascript - 如何在鼠标悬停时将图像调整到每个站点?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8542193/

相关文章:

javascript - 获取 API 未发布到 Node.js 服务器(正文为空)

php - 1 个同时下载 + 强制等待时间 + Amazon S3

javascript - rails 5 : how to respond_to js after redirect?

html - css:稍微倾斜的边界半径

javascript - JQuery - 图像悬停在另一个图像后面的事件

javascript - 如何通过同一页面将变量传递给 javascript 页面重新加载?

css - 在 IE9 中 CSS 高度为 100% 的 Canvas

python - Beautiful Soup CSS 选择器找不到任何东西

javascript - 模拟 Webkit 的元素检查器

mouseover - 如何在 EaselJS 中处理鼠标悬停事件?