Question

在代码中，图标是当你将鼠标快速移动到某些图标时会逐渐消失的图像。这主要是因为我已经包含了在悬停时降低图像亮度的过渡。但是当鼠标快速移动通过图像时，它们会消失一秒钟然后回来。如何删除此错误？

＆＃13;

header{
    	background:	#000;
    	color:#FFF;
    	text-align:center;
    	padding:30px; 
    	font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
    	font-size:25px;
    }

#iconwrap{float:left;}

    #icon{
    -webkit-transition: 0s -webkit-filter;
   	-webkit-transition-duration: .6s;	
    -webkit-transition-timing-function: cubic-bezier(0.175,0.885,0.320,1.275);
    
    -moz-transition: 0s -webkit-filter;
   	-moz-transition-duration: .6s;	
   	-moz-transition-timing-function: cubic-bezier(0.175,0.885,0.320,1.275);

    -o-transition: 0s -webkit-filter;
   	-o-transition-duration: .6s;	
   	-o-transition-timing-function: cubic-bezier(0.175,0.885,0.320,1.275);
    }
    #icon:hover{ 
    -webkit-filter: brightness(25%);
    -moz-filter: brightness(25%);
    -o-filter: brightness(25%);}

＆＃13;

<header>
    Project-Mate

<nav>

    <div id="iconwrap">
        <img id="icon" src="http://www.easyicon.net/api/resize_png_new.php?id=548873&size=48" />
    	<img id="icon" src="http://www.easyicon.net/api/resize_png_new.php?id=548873&size=48" />
    	<img id="icon" src="http://www.easyicon.net/api/resize_png_new.php?id=548873&size=48" />
    	<img id="icon" src="http://www.easyicon.net/api/resize_png_new.php?id=548873&size=48" />
    	<img id="icon" src="http://www.easyicon.net/api/resize_png_new.php?id=548873&size=48" />
    </div>

</nav>   
<header>

＆＃13;

Answer 1

正如您在此tutorial中所看到的，cubic-bezier函数在其四点参数中仅采用0到1的值。当我将第四个点的值更改为“1”而不是“1.275”时，淡出问题得以解决。希望它能回答你的问题！

如何在鼠标突然移动时停止图像消失？

1 个答案: