时髦的悬停效果使用CSS

随着所有这些CSS3效果和教程每天跳出来，展示我们可以实现的所有新的和美妙的事情，我们有时会忘记可怜的小旧CSS2.1和它仍然拥有的巨大潜力。

有了非常好的浏览器支持，我们可以做很多很酷的事情，我们知道这些事情在所有主流浏览器上都可以工作。

在本教程中，我将讨论使用CSS2.1属性创建灵活的高级悬停技术。

这是一个现场演示我们将要创造的效果。

高级悬停状态非常简单

当我第一次开始学习CSS的时候:徘徊伪元素只不过是一种删除文本链接上下划线的方法。

从那时起，通过实验，我了解到它是如此强大，当与其他CSS属性一起使用时，它可以创建一些非常酷的效果。

其中一个效果是创建出现在图像上方的标题文本，为用户创建一些良好的视觉反馈，并为他们提供一些关于他们鼠标悬停或聚焦的图像的信息。

精明的读者会发现，除了我们在这里讨论的内容之外，这种技术还有很大的潜力，比如当鼠标悬停在超链接上时，它可以显示CSS工具提示。

我们将使用这些关键的CSS属性、伪类和伪元素来完成我们的技术:

• 内容我们将使用CSS生成的内容来添加标题，而不是创建不必要的标记来显示标题。
• :徘徊，:专注让我们用鼠标/键盘显示/隐藏标题覆盖。
• :在与content属性一起使用，动态地附加标题内容和布局。

生成内容为王

css生成的内容允许我们添加(:在)或在(:在)内容到可以显示硬编码内容、动态内容(attr ())、图像(url ())及计数器(计数器()）.

在本例中，我们将使用attr ()函数从锚(<一>)标记。

 标题=“农场上的日出”>   
 .jpg

Ul a:悬停:在{内容:attr(标题)；｝

正如你从上面看到的，标记非常简单，内容属性的使用允许我们创建一些出色的行为，而不会膨胀。它所做的一切都是为了得到锚标题属性值，并将内容:在锚。

让它放好

现在我们有了一些简单的标记，现在在图像后的hover/focus上显示我们的标题，我们将添加一些额外的CSS来美化标题，使其位于图像上方，而不是下方。

我们首先对包含的列表项进行一些简单的样式化。这里唯一需要的样式是相对位置。

使用相对位置允许我们在列表项中对元素进行绝对定位。

其他的风格是装饰性的。

l b b {位置:相对;浮:左;list-style:没有;Margin: 0 20px 20px 0;字体大小:10 px;｝

为我们的:徘徊伪类，我们绝对定位css生成的内容，并给它一个高度，背景，行高度(这是相同的高度，所以我们可以垂直中心的文本)。

我们也对:专注伪类，所以不会使用鼠标的人仍然可以获得完整的体验。

ul一:徘徊:后，ul a:专注:{后背景:rgb (255255255);底部:2 px;内容:attr(标题);颜色:# 000;显示:块;粗细:大胆的;高度:30 px;行高:30 px;位置:绝对的;text-align:中心;宽度:100%;｝

我们还将在图像周围添加一个轮廓，当用户聚焦或悬停在图像上时，创建一个漂亮的边界效果。

我们不使用的原因边境财产是因为大纲不会影响它“勾勒”的区域，然而边境会影响元素。

Ul a:悬停img, Ul a:聚焦img {大纲: 3px实体#ccc;｝

我们现在有一个简单而有效的标题覆盖，它有非常精简的标记和一些简单的CSS来创建一个有效的技术。

让我们进一步扩展

我们有一个简单的标题叠加工作得很好，但我们如何添加一些额外的样式，这样我们就可以通过添加几行CSS很容易地改变标题的位置?

我们将创建一个.reverse类，我们可以将其分配给任何锚定元素，这些元素将重新定位我们的标题，使其出现在图像的顶部而不是底部。

ul一.reverse:hover:after, ul a.reverse:focus:after {top: 0px;｝

我们还可以创建.offset类将标题定位在中间，或将其偏移任何值。负边距用于将它拉到中间。

Ul a.offset:hover:after, Ul a.offset:focus:after {top: 50%;margin-top: -15 px;｝

一点CSS3

当然，我忍不住使用了一些CSS3的优点来让它更好一点。在这一点上，我们只是使用渐进式增强的原则，支持css3的浏览器会有更好的体验。

我们的效果仍然可以在支持css2的浏览器(比如Internet Explorer)上工作，即使我们已经用CSS3修饰了它。

在锚上，我添加了CSS3不必属性可在图像悬停/聚焦时创建漂亮的投影效果。大纲设置为没有一个这样当它被聚焦时，虚线轮廓就不会出现。

(查看更多的CSS3技术．)

通常情况下，这是不允许的，但是由于我们通过显示标题、概述图像和应用投影来充分显示图像具有焦点，因此仍然很明显，所讨论的元素具有焦点。

注意:应该说不必属性已经正式从W3C CSS3草案规范中删除，以便进一步讨论，但是浏览器供应商似乎没有很快删除它的计划，如果有的话。

Ul a:悬停，Ul a:焦点{显示:块;大纲:没有;-moz-box-shadow: 3px 3px 5px #000;-webkit-box-shadow: 3px 3px 5px #000;Box-shadow: 3px 3px 5px #000;｝

使用CSS3rgba ()属性时，我们可以使背景略不透明，以便在标题下可以看到图像。设置rgb在我们rgba值确保浏览器(如IE8)仍然显示背景。

Ul a:hover:after, Ul a:focus:after {background:rgb(255255255);背景:rgba》(255255255,0.7);｝

我们也可以在Firefox 3.6, Safari 4和Chrome 4中添加CSS渐变。(参见另一个使用教程网页排版上的CSS渐变．)

在渐变中，我们也使用rgba这样我们就可以有一个混合两种颜色的不透明渐变。

背景:-moz-linear-gradient(顶部,rgba (255255255, 0.7), rgba (204204204, 0.7));/* Firefox 3.6+ */ background:-webkit-gradient(线性,0% - 0%,0% - 100%,从(rgba (255255255, 0.7)), (rgba (204204204, 0.7)));/* Safari/Chrome */

为了使标题文本更突出一点，我添加了文本阴影属性在文本上赋予它一个微妙的投影。

文字阴影:1px 1px #fff;

另一个非常有用的CSS3属性是box-sizing，这让我们可以调整盒子模型的工作方式。

Ul a.alternate01:hover:after, Ul a.alternate01:focus:after {top: 0;宽度:50%;高度:100%;行高:正常;text-align:左;填充:4 px;字体大小:12 px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;｝

通过调整盒子模型，该技术可以利用我们的优势来进一步扩展标题，因此我们可以通过使覆盖覆盖图像的一半并让内容沿侧面运行来保持该技术尽可能灵活。

通过一些调整，使用这种技术非常简单。

盒子模型——默认情况下——会在所设置的高度上添加填充和边框，由于我们将高度设置为100%，这实际上会将我们的覆盖层推出几个像素。

为了改变这种行为，我们使用了CSS3box-sizing属性，并将其设置为border-box．这允许我们设置百分比值，并与高度一起计算任何填充和边界，这样就不会像自然那样将其推出。

默认情况下，box-sizing设置为content-box。IE8显然不支持这个属性，但是IE的盒子模型就像设置的一样box-sizing: border-box因此不需要任何特殊处理就能起作用。

基于Mozilla和WebKit的浏览器需要特定的前缀，而Opera则不需要前缀就支持它。

Ul a.reverse:hover:after, Ul a.reverse:focus:after {top: 0;右:0;｝

用小加法对我们原来的反向类进行加法右:0，我们可以创建一些可重用的CSS来水平或垂直地反转它，而不影响具有.reverse类。

根据标题类型(水平或垂直).reverse类将正确处理这两种情况。

如果IE没有做一些奇怪的事情，它就不是CSS

当然，ie8——讽刺的是，第一个支持完整CSS2.1规范的IE浏览器——在生成内容方面遇到了问题。

在最初的测试中，我认为IE8实际上不支持生成内容，因为当我将鼠标悬停在图像上时，什么也没有显示出来。

经过一些测试，并使用与图像形成对比的文本颜色，我注意到背景色没有显示出来，但文本显示出来了。

然后，我想至少它还能用，只是没有背景。不满足于此，我进一步调查，发现背景色出现在图像后面。别问我怎么会这样，为什么会这样。

我提出了解决这个问题的解决方案，并允许css生成的内容及其背景显示在图像上，就像在其他浏览器中一样。

基本上，我们给图像一个相对位置，并设置z - index来－1将其强制置于生成的内容之下。

然后我们必须将位置重置回静态对于较好的浏览器，相对位置会对标题覆盖造成严重破坏。

我使用了CSS3不()伪选择器(IE8不支持)将位置设置回默认行为静态．

Ul li img{位置:相对的;z - index: 1;} /*对于IE8 */ ul li:not(#foo) img{位置:静态;} /*重置浏览器位置*/

把它们放在一起

让我们把所有这些整合到一个完整的工作版本中。

你可以看到一个演示时髦的悬停效果使用不同的图像大小来显示其灵活性。

下面是创建带有标题覆盖的单个图像所需的完整标记。演示页面上有更多的图像，还演示了改变颜色和将覆盖的标题移动到不同的位置，就像本文前面解释的那样，只是为了展示各种潜在的调整和用例。

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">     
 
  
 
    
 
  

CSS将简单的标记转换成时髦的悬停/聚焦效果。

Ul{溢出:隐藏;填充:5 px;} ul > li{位置:相对;浮:左;list-style:没有;Margin: 0 20px 20px 0;字体大小:10 px;} ul a {text-decoration: none;显示:块;} ul li img{显示:块; position: relative; z-index: -1; } /* IE8 fix, background colour appears behind img for uknown reason set negative z-index */ ul li:not([class=na]) img { position: static; } /* Reset relative position, as this plays havoc with good browsers */ ul a:hover, ul a:focus { display: block; outline: none; -moz-box-shadow: 3px 3px 5px #000; -webkit-box-shadow: 3px 3px 5px #000; box-shadow: 3px 3px 5px #000; } ul a:hover img, ul a:focus img { outline: 3px solid #ccc; } ul a:hover:after, ul a:focus:after { content: attr(title); color: #000; position: absolute; bottom: 0; height: 30px; line-height: 30px; text-align: center; font-weight: bold; width: 100%; background: rgb(255,255,255); background: rgba(255,255,255,0.7); background: -moz-linear-gradient(top, rgba(255,255,255,0.7), rgba(204,204,204,0.7)); /* Firefox 3.6+ */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.7)), to(rgba(204,204,204,0.7))); /* Safari */ display: block; text-shadow: 1px 1px 1px #fff; }

总结

我们现在有了一个简单的技术，它只使用CSS2.1就非常有用。当然，我还展示了如何使用一些额外的(但不是关键的)css3来修饰它，使它在更现代的浏览器中更好一些。

我们有很好的浏览器支持;它适用于所有最新版本的浏览器。

我们确保这个技术是可以通过键盘访问的，所以如果你不用或不能使用鼠标，这个技术仍然有效。

你怎么看?你会使用我上面提到的任何技巧吗?为什么或者为什么不呢?在评论中分享你的想法和问题。

下载源文件

• snazzy_hover_css(zip, 44.0 kb)

相关内容

• 30 CSS导航技术
• 30个特殊的CSS技术和示例
• 14个jQuery插件用于处理图像