CSS中3d导航为什么要加过渡效果

Posted 2023-05-10

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS中3d导航为什么要加过渡效果相关的知识，希望对你有一定的参考价值。

参考技术A 过渡效果是在鼠标指针浮到元素上时发生的效果。
CSS过渡是元素从一种样式逐渐改变为另一种的效果，这边要注意的是，想要实现这一点，必须规定两项内容，规定您希望把效果添加到哪个CSS属性上规定效果的时长，规定您希望把效果添加到哪个CSS属性上，规定效果的时长。

CSS3 过渡/悬停效果在 Firefox 中不起作用； Firefox 错误？

【中文标题】CSS3 过渡/悬停效果在 Firefox 中不起作用； Firefox 错误？【英文标题】：CSS3 transition/hover effect not working in Firefox; a Firefox bug? 【发布时间】：2011-09-12 16:10:32 【问题描述】：

我正在尝试创建一个鼠标悬停效果，将顶层向左滑动并使用 CSS3 显示底层。该代码在 Chrome 中有效，但在 Firefox 中无效……我又做了一些愚蠢的事情吗？感谢您的帮助！

编辑：我一定做错了什么，因为即使我省略了转换代码，当我将鼠标悬停在 Firefox 中的“图层”上时也没有任何反应...:(

代码：

<html>
  <div class="layers">
    <div class="over">content</div>
    <div class="under">content</div>
  </div>
</html>

风格：

.layers 
  position: relative;   
  width: 200px;
  height: 50px;
  overflow: hidden;
   

.over 
  width: 200px;
  height: 50px;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
   
.under 
  width: 200px;
  height: 50px;
  position: absolute;
  top: 0px;
  left: 0px;
           

.layers:hover .over 
  left: -200px;

【问题讨论】：

鉴于这似乎取决于您正在执行的确切 ajax 内容，仅显示 CSS 并不足以回答问题。指向整个页面？我才发现其实跟Ajax没有关系；即使作为一个独立的页面，CSS 过渡，甚至是一个简单的“.over:hover”在 Firefox 中根本不起作用......:( 哪个FF版本？它对我有用 FF4 @nibicurio :hover 通常在 Firefox 中可以正常工作...您的页面是在怪癖模式还是什么？嗯，我使用的是 FF4，如果它只是一个简单的 :hover 选择器，它确实工作得很好，但是当它在两层类中时它不起作用......我解决了虽然有问题；请参阅下面的帖子。 【参考方案1】：

看到这个问题：Why is my CSS3 Transition not working in Firefox?

【讨论】：

我不太明白他在说什么……你介意为我澄清一下吗？ “看起来 FF 不会转换默认值。它们必须在原始元素上声明，然后才能转换到新属性。” 这意味着显式 left: 0; 应该在原始 .over div 上声明，而不是默认设置，你已经这样做了，所以我认为这可能不是这种情况下的原因 【参考方案2】：

原来在 Firefox (firefox hover opacity) 中有一个错误，我通过更改解决了这个问题

.layers:hover .over

到

[class="layers"]:hover over

我刚刚升级到 Firefox 5（从 Firefox 4）；不知道这个bug是否已经修复...

【讨论】：

以上是关于CSS中3d导航为什么要加过渡效果的主要内容，如果未能解决你的问题，请参考以下文章