【问题标题】:CSS: transition opacity on mouse-out?CSS:鼠标移出时的过渡不透明度?
【发布时间】:2012-05-20 21:21:42
【问题描述】:
.item:hover {
        zoom: 1;
        filter: alpha(opacity=50);
        opacity: 0.5;
        -webkit-transition: opacity .15s ease-in-out;
        -moz-transition: opacity .15s ease-in-out;
        -ms-transition: opacity .15s ease-in-out;
        -o-transition: opacity .15s ease-in-out;
        transition: opacity .15s ease-in-out;
    }

为什么这只会在我悬停时为不透明度设置动画,而当我用鼠标离开对象时却没有?

在这里演示:https://jsfiddle.net/7uR8z/

【问题讨论】:

  • 我使用的是 Safari,即使我用鼠标离开对象,它也能正常工作......有什么问题?
  • 不,对我不起作用!当我悬停红色框时,过渡有效!当用鼠标离开红色框时,它会“跳”回完全不透明度 - 我希望它在鼠标移出时也能动画!
  • 为什么不使用过滤器...caniuse.com/#search=filter

标签: css css-transitions


【解决方案1】:
$(window).scroll(function() {    
    $('.logo_container, .slogan').css({
        "opacity" : ".1",
        "transition" : "opacity .8s ease-in-out"
    });
});

检查小提琴:https://jsfiddle.net/2k3hfwo0/2/

【讨论】:

    【解决方案2】:

    您仅将转换应用于 :hover 伪类,而不是元素本身。

    .item {   
      height:200px;
      width:200px;
      background:red; 
      -webkit-transition: opacity 1s ease-in-out;
      -moz-transition: opacity 1s ease-in-out;
      -ms-transition: opacity 1s ease-in-out;
      -o-transition: opacity 1s ease-in-out;
      transition: opacity 1s ease-in-out;
    }
    
    .item:hover {
      zoom: 1;
      filter: alpha(opacity=50);
      opacity: 0.5;
    }
    

    演示:https://jsfiddle.net/7uR8z/6/

    如果您不希望转换影响mouse-over 事件,而只影响mouse-out,您可以关闭:hover 状态的转换:

    .item:hover {
      -webkit-transition: none;
      -moz-transition: none;
      -ms-transition: none;
      -o-transition: none;
      transition: none;
      zoom: 1;
      filter: alpha(opacity=50);
      opacity: 0.5;
    }
    

    演示:https://jsfiddle.net/7uR8z/3/

    【讨论】:

      【解决方案3】:

      我设法使用 css/jQuery 找到了一个我觉得很舒服的解决方案。最初的问题:我不得不在制作动画时强制显示可见性,因为我有元素悬挂在该区域之外。这样一来,大块文本现在也会在动画期间悬挂在内容区域之外。

      解决方案是以不透明度 0 开始主要文本元素,然后使用 addClass 注入并转换为不透明度 1。然后再次单击时 removeClass

      我确信有一个全 jQquery 方法可以做到这一点。我只是不适合这样做。 :)

      所以这是最基本的形式...

      .slideDown().addClass("load");
      .slideUp().removeClass("load");
      

      感谢大家的帮助。

      【讨论】:

        猜你喜欢
        • 2017-06-27
        • 2021-07-26
        • 2021-10-12
        • 2020-05-29
        • 2017-11-01
        • 2019-01-03
        • 1970-01-01
        • 1970-01-01
        • 2014-02-04
        相关资源
        最近更新 更多