jquery hover 翻转图显示内容 firefox兼容问题

Google,IE,Opera,正常显示示例
Google,IE,Opera,正常显示示例

FF的错误显示示例
FF的错误显示示例

首先,我定义正面显示为app1,hover触发后的反面显示为app2,html和css代码如下

html
html

css
css

另,附jquery脚本
jquery

2个回答

如果要处理兼容问题的话,这里推荐一个css方法
backface-visibility 属性定义当元素不面向屏幕时是否可见。(也就是旋转180度)
如果在旋转元素不希望看到其背面时,该属性很有用。
具体参考
http://www.runoob.com/cssref/css3-pr-backface-visibility.html
我以前做过这个效果,就是两个div,在一起,都transform:rotateY(180deg); 然后一个 backface-visibility:visible;
另一个backface-visibility:hidden;
在加点过渡,就行了。

limengjiejx
MJay_Lee mark~
接近 3 年之前 回复

发代码出来,发个截图想帮你测试都不行。。

showbo
支付宝加好友偷能量挖 回复mengJieLii: .opposite div{height: 280px;width: 100%;}这样式min-height直接改为height就行了,应该是反转后不识别min-height了,挤一堆了。记得采纳啊,嘿嘿:)
接近 3 年之前 回复
limengjiejx
MJay_Lee https://mengjielee.github.io/jquery_hover_simple/ 这是源址,我是小白,抱歉,下次代码不贴图了。
接近 3 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问