css 菜单栏悬停_在CSS中创建菜单悬停背景过渡

css 菜单栏悬停

Improving the user experience of your website visitors is a paramount importance to every Web developer, but many of these user experience improvements is only possible thanks to JavaScript. But not when it comes to creating style transitions – CSS 3 allows you to create them without needing any JavaScript at all. Be aware that CSS 3 transitions are, as of publishing this article, still in draft stages of standardisation and only newer versions of the main Web browsers support them. Some older versions of Firefox, Chrome, Safari and Opera use vendor prefixes (such as -moz-transition) so you will need to use these vendor properties along with the “official” property.

对于每个Web开发人员而言，改善网站访问者的用户体验都是至关重要的，但是许多此类用户体验的改善只有借助JavaScript才有可能。 但是在创建样式转换时却不是这样-CSS 3允许您完全不需要任何JavaScript即可创建它们。 请注意，在发布本文时，CSS 3过渡仍处于标准化的草拟阶段，只有较新版本的主要Web浏览器才支持它们。 Firefox，Chrome，Safari和Opera的某些较旧版本使用供应商前缀(例如-moz-transition)，因此您需要将这些供应商属性与“ official”属性一起使用。

Creating background colour transitions on hover

在悬停时创建背景颜色过渡

Take a look at the demo of what we’ll be achieving here.

看一下我们将在这里实现的演示。

To instruct the browser to use transitions, the following CSS code needs to be used on the selector which is for the menu item itself:

为了指示浏览器使用过渡，需要在用于菜单项本身的选择器上使用以下CSS代码：

a { … -webkit-transition: all 300ms ease 0s; -moz-transition: all 300ms ease 0s; -ms-transition: all 300ms ease 0s; -o-transition: all 300ms ease 0s; transition: all 300ms ease 0s; … }

{{-webkit-transition：所有300毫秒缓解0； -moz-transition：所有300ms缓解0s； -ms-transition：所有300ms缓解0s； -o-transition：所有300ms缓解0s； 过渡：所有300ms缓解0s； …}

And quite simply, when the user hovers over the element, the CSS code is:

而且很简单，当用户将鼠标悬停在元素上时，CSS代码为：

a:hover { … background: #fcc852; … }

a：悬停{…背景：＃fcc852; …}

For the transition code, the properties above are the shorthand version (like the “background” property is the shorthand version of all the different background-* properties). An explanation of what “all 300ms ease 0s” means:

对于过渡代码，上面的属性是速记版本(例如“ background”属性是所有不同的background- *属性的速记版本)。 关于“所有300ms缓解0”的含义的解释：

• all: this specifies what property the transition should apply to; in this case I could replace “all” with “background”

  全部：指定过渡应该应用于什么属性； 在这种情况下，我可以将“全部”替换为“背景”

• 300ms: the transition will last for 300 milliseconds from start to end

  300ms：转换从开始到结束将持续300毫秒

• ease: this allows you to manipulate what happens during the transition – for example, replacing “ease” with “ease-out” would make the transition slow near the end

  简便：这使您可以控制过渡期间发生的情况–例如，用“缓出”代替“轻松”会使过渡快到快结束时

• 0s: this is the delay in seconds before the transition starts – as you might guess, 0s means the transition will start immediately on hover

  0s：这是过渡开始前的延迟(以秒为单位)–您可能会猜到，0s表示过渡将在悬停时立即开始

Browser compatibility

浏览器兼容性

CSS transitions work in Firefox 4 and above, Chrome 4 and above, Safari 3.1 and above and Opera 10.5 and above. Unfortunately, only Internet Explorer 10 and above support CSS transitions, so users on version 9 (which still has a large usage share worldwide) won’t get the same experience.

CSS转换可在Firefox 4及更高版本，Chrome 4及更高版本，Safari 3.1及更高版本以及Opera 10.5及更高版本中工作。 不幸的是，只有Internet Explorer 10及更高版本才支持CSS过渡，因此版本9(在全球仍具有较大的使用份额)的用户将不会获得相同的体验。

Firefox 4 to 15, Chrome 4 to 25, Safari 3.1 to 6.0 and Opera 10.5 to 12.0 only support transitions using their vendor-specific property. Until usage of older versions of these browsers become irrelevant, you will need to also use them. Using them is technically invalid CSS code, but if you want a pure CSS solution and wide browser support, there’s very little choice.

Firefox 4至15，Chrome 4至25，Safari 3.1至6.0和Opera 10.5至12.0仅使用其特定于供应商的属性来支持过渡。 在不再使用这些浏览器的旧版本之前，您还需要使用它们。 使用它们在技术上是无效CSS代码，但是如果您想要纯CSS解决方案和广泛的浏览器支持，则别无选择。

Have fun coding!

祝您编码愉快！

翻译自: https://www.eukhost.com/blog/webhosting/creating-menu-hover-background-transitions-css/

css 菜单栏悬停