css鼠标滑过图标显示

Today I want to show you, how to create an Apple-style navigation menu with a twist. Although “fancy” and “Apple-style” don’t really go together, I thought that it’s time for something different.

今天，我想向您展示如何创建一个苹果风格的导航菜单。 尽管“花式”和“苹果风格”并没有真正融为一体，但我认为该是时候有所不同了。

This menu looks very similar to the Apple-style navigation but it reveals some icons when hovering over it. The icons slide out from the top and when the mouse leaves the link, the icon slides back under the link element. This creates a neat “card-shuffle” effect.

该菜单看起来与Apple样式的导航非常相似，但是将鼠标悬停在菜单上时会显示一些图标。 图标从顶部滑出，当鼠标离开链接时，图标在链接元素下方向后滑动。 这会产生整洁的“洗牌”效果。

The icons used in this tutorial can be found on DryIcons.com. I am not allowed to redistribute the icons under the free license, so I did not include them in the downloadable ZIP file. But you can easily find them here. I did not rename them for the tutorial so that you can easily recreate the navigation without changing the names or the stylesheet.

本教程中使用的图标可以在DryIcons.com上找到。 我不允许在免费许可证下重新分发图标，因此我没有将它们包含在可下载的ZIP文件中。 但是您可以在这里轻松找到它们。 我没有为教程重命名它们，因此您可以轻松地重新创建导航，而无需更改名称或样式表。

Ok, let’s get started!

好的，让我们开始吧！

1. HTML (1. The HTML)

The markup just consists of a div with an unordered list inside. The list elements contain a span for the icon and the link element:

标记仅包含一个div，其中包含一个无序列表。 列表元素包含图标和链接元素的范围：

<div class="navigation">
<ul class="menu" id="menu">
<li><span class="ipod"></span><a href="" class="first">Players</a></li>
<li><span class="video_camera"></span><a href="">Cameras</a></li>
<li><span class="television"></span><a href="">TVs</a></li>
<li><span class="monitor"></span><a href="">Screens</a></li>
<li><span class="toolbox"></span><a href="">Tools</a></li>
<li><span class="telephone"></span><a href="">Phones</a></li>
<li><span class="print"></span><a href="" class="last">Printers</a></li>
</ul>
</div>

2. CSS (2. The CSS)

The style of the navigation container and the unordered list will be the following:

导航容器的样式和无序列表如下：

.navigation{
position:relative;
margin:0 auto;
width:915px;
}
ul.menu{
list-style:none;
font-family:"Verdana",sans-serif;
border-top:1px solid #bebebe;
margin:0px;
padding:0px;
float:left;
}
ul.menu li{
float:left;
}

Since we are making the list float, we will need some relative wrapper for the icons. You see, the icons which will be the background-images of the spans in our list, will have absolute positioning. That comes handy when you need to define a z-index, i.e. saying that some element is on top or under another one. Since we want the icons to appear on top and then dissapear under the link element, we will have to deal with z-indeces. And absolute positioning of elements in a relative container will makes things easier.

由于我们使列表浮动，因此我们需要一些相对的包装图标。 您会看到，这些图标(将成为我们列表中跨度的背景图像)将具有绝对的位置。 当您需要定义z-index时(即说某个元素在另一个元素的上方或下方)，这很方便。 由于我们希望图标显示在顶部，然后在link元素下消失，因此我们必须处理z坐标。 元素在相对容器中的绝对定位将使事情变得容易。

Now, let’s define the style for the link elements:

现在，让我们定义链接元素的样式：

ul.menu li a{
text-decoration:none;
background:#7E7E7E url(../images/bgMenu.png) repeat-x top left;
padding:15px 0px;
width:128px;
color:#333333;
float:left;
text-align:center;
border-right:1px solid #a1a1a1;
border-left:1px solid #e8e8e8;
font-weight:bold;
font-size:13px;
-moz-box-shadow: 0 1px 3px #555;
-webkit-box-shadow: 0 1px 3px #555;
text-shadow: 0 1px 1px #fff;
}

We want to give the link elements a fixed width and some background gradient. The borders will create a nice inset effect.

我们想给链接元素一个固定的宽度和一些背景渐变。 边框会产生不错的插图效果。

The next hover class will be applied using jQuery, since the :hover pseudo class creates an unwanted effect: When the icon slides out it covers the link for a few milliseconds, making the hover style dissapear in that time. That is perceived as a flicker and we will avoid that by defining a class that we will simply add with jQuery when we do the icon slide out effect:

下一个悬停类将使用jQuery来应用，因为：hover伪类会产生有害的效果：当图标滑出时，它会覆盖链接几毫秒，从而使悬停样式在那时消失。 这被认为是一种闪烁，我们将通过定义一个类来避免这种情况，该类在执行图标滑出效果时将简单地添加到jQuery中：

ul.menu li a.hover{
background-image:none;
color:#fff;
text-shadow: 0 -1px 1px #000;
}

The first and last link element should have a rounded border on the respective side, so we define two classes for those:

第一个和最后一个链接元素应在各自的侧面上具有圆角边框，因此我们为它们定义了两个类：

ul.menu li a.first{
-moz-border-radius:0px 0px 0px 10px;
-webkit-border-bottom-left-radius: 10px;
border-left:none;
}
ul.menu li a.last{
-moz-border-radius:0px 0px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
}

The common style for all the icon spans will be the following:

所有图标范围的通用样式如下：

ul.menu li span{
width:64px;
height:64px;
background-repeat:no-repeat;
background-color:transparent;
position:absolute;
z-index:-1;
top:80px;
cursor:pointer;
}

The single styles for the specific icons will contain the background-image and the x-position:

特定图标的单一样式将包含背景图像和x位置：

ul.menu li span.ipod{
background-image:url(../icons/ipod.png);
left:33px; /*128/2 - 32(half of icon) +1 of border*/
}
ul.menu li span.video_camera{
background-image:url(../icons/video_camera.png);
left:163px; /* plus 128 + 2px of border*/
}
ul.menu li span.television{
background-image:url(../icons/television.png);
left:293px;
}
ul.menu li span.monitor{
background-image:url(../icons/monitor.png);
left:423px;
}
ul.menu li span.toolbox{
background-image:url(../icons/toolbox.png);
left:553px;
}
ul.menu li span.telephone{
background-image:url(../icons/telephone.png);
left:683px;
}
ul.menu li span.print{
background-image:url(../icons/print.png);
left:813px;
}

As you can see, we are positioning the icons in such a way, that they are centered inside of the list element. The top position is 80px initially since we want to show them to the user when the page get’s loaded. Then we will hide them in a stair-like fashion to create an awesome effect!

如您所见，我们将图标放置在列表元素内部居中的位置。 最初，最高位置是80px，因为我们希望在加载页面时向用户显示它们。 然后，我们将它们以楼梯状的方式隐藏起来，以产生令人赞叹的效果！

3. JavaScript (3. The JavaScript)

First, we want to create the effect of the icons dissapearing in a stair-like fashion and then we will define the hover function for the list elements:

首先，我们要以阶梯状的方式创建消失的图标的效果，然后为列表元素定义悬停功能：

$(function() {
var d=1000;
$('#menu span').each(function(){
$(this).stop().animate({
'top':'-17px'
},d+=250);
});$('#menu > li').hover(
function () {
var $this = $(this);
$('a',$this).addClass('hover');
$('span',$this).stop().animate({
'top':'40px'
},300).css({
'zIndex':'10'
});
},
function () {
var $this = $(this);
$('a',$this).removeClass('hover');
$('span',$this).stop().animate({
'top':'-17px'
},800).css({
'zIndex':'-1'
});
}
);
});

When hovering, we add the class “hover” to the link element, make the icon appear from the top, and increase the z-Index, so that the icon stays on top of the link. When the mouse goes out, we do exactly the opposite, which creates the effect that the icon dissapears behind the link element. For that we will allow more time (800 milliseconds) because it’s such a fun effect that the user might want to enjoy a little bit!

悬停时，我们将“悬停”类添加到链接元素，使图标从顶部显示，并增加z-Index，以便图标停留在链接的顶部。 当鼠标移出时，我们执行相反的操作，从而产生图标消失在link元素后面的效果。 为此，我们将允许更多的时间(800毫秒)，因为这是一种有趣的效果，用户可能希望尽情享受！

And that’s all! I hope you like and enjoy it!

就这样！ 希望您喜欢并喜欢它！

翻译自: https://tympanus.net/codrops/2010/01/17/css-and-jquery-tutorial-fancy-apple-style-icon-slide-out-navigation/

css鼠标滑过图标显示