8

我有一个带有链接和图像的缩略图列表，因此当用户悬停一个li元素时，它的高度变为 100%，但由于某些奇怪的原因，它在 Chrome 中出现错误的问题。我不明白为什么在 Chrome 中悬停的li宽度不会调整到它的“新”大小。

（注意：这是我的问题的简化版本）

此外，此问题仅发生在:hover. 但不是，可以说，与:nth-child

游乐场链接

铬 vs FF

更新：问题继续...

在答案中查看我的解决方案，但问题仍在继续……我用鼠标放大，你会看到它发生……请注意，图像的数量可能很大。

更新 2：

每次触发 mousehweel 事件时强制重绘... thumbs.hide().show(0);

4

3 回答 3

1

我的解决方案：解决方案游乐场

这个想法是通过给图像一个与状态几乎相同的新高度来欺骗 Chrome 重新计算宽度li:hover。但这对 Chrome 来说还不够。转换也必须应用于img. 这都是巫毒编码，但这是我能想到的最不难看的解决方案：

ul{ list-style:none; display:inline-block; height:80px; white-space:pre; width:100%; }
  li{ display:inline-block; vertical-align:middle; height:60%; -webkit-transition:.2s; transition:.2s; }
  li:hover{ height:100%; }
    li a{ height:100%; padding:0 2px; display:block; }
    li a img{ height:96%; -webkit-transition:.2s; transition:.2s; }
    li:hover a img{ min-height:96%; }
于 2013-02-06T15:49:27.280 回答
0

我是新来的，我不确定这是否是一个好习惯，但我会发布我的观察结果，而不是一个精确的解决方案：

  1. 同样的问题也出现在 Opera 上。

  2. 这对我来说似乎很奇怪 - 当li:hover a img{ border:1px solid black; }或任何类似的不应该对当前情况做出任何改变的 css 代码被添加时，这一切都开始表现得非常奇怪。前 - http://jsbin.com/operib/43/edit

这是我不觉得优雅的解决方案，只是一个快速修复：http: //jsbin.com/operib/39/edit

编辑：在测试了@Carol McKay 的结果后，我意识到过渡正在把整个事情搞得一团糟。下一个链接（节点 58）是上面链接的节点 43（基本上是节点 1，只是在悬停时为图像添加了边框），移除了过渡，它工作得很好 http://jsbin.com/operib/58/edit。

似乎应该在悬停时添加任何 css 规则，以便<img/>重新计算尺寸。

于 2013-02-05T23:56:04.753 回答
0

改为对图像应用过渡。

css

ul{ list-style:none; display:inline-block; height:80px; white-space:pre; width:100%; 
}
li{ display:inline-block; vertical-align:middle; height:60%; }
li a{ height:100%; padding:0 2px; display:block; }
li a img{ display:inline-block; vertical-align:middle; height:96%; transition:0.15s; -   webkit-transition:0.15s; }

li:hover{ height:100%; }
li:hover a img{ height:100%; opacity:1; }

http://jsbin.com/operib/83/edit

于 2013-02-05T23:57:55.833 回答