悬停变化

Question

我有一个像陈述的css道具

#menu li#selected { padding: 0 10px; margin:0; background:url(nav-tab-left.gif) bottom left no-repeat #90288d; height: 35px; }

之后，我需要显示图像的第二部分nav-tab-right.gif

我试试

#menu li#selected:after { background:url(nav-tab-right.gif) bottom right no-repeat; }

但是这还没有结果

Answer 1

在CSS中没有“content”属性，之后将不执行任何操作。它选择一个伪元素来表示它应用于元素的最后一个子元素（在你的情况下，一种虚拟元素是li＃子的选择）。

它不像正则表达式那样的“占位符”引用可以用行开头和结束行;实际上你必须为它提供一个内容属性，它将被渲染但不会成为DOM树的一部分。该内容可以是空字符串，但仍必须指定：

#menu li#selected:after
{
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: red; 
}

这应该让人知道什么是可以实现的。

Answer 2

从your previous question的HTML构建。

IE7及以下版本不支持:after伪元素。请改用这样的东西：

<强> HTML：

<li id="selected"><a href="http://www.">FAQ'S</a></li>

<强> CSS：

#menu li#selected {
  padding: 0;
  margin:0;
  background:url(nav-tab-left.gif) bottom left no-repeat #90288d;
  height: 35px;
}

#menu #selected a {
  display: block;
  background:url(nav-tab-right.gif) bottom right no-repeat;
  height: 35px;
  line-height: 35px; /* Centers the text vertically */
  padding: 0 6px;    /* Gives 6px of horizontal padding to the text */
  margin: 0;
}

这适用于所有浏览器，不依赖IE7及以下版本不支持的:after。

悬停变化

使用此方法的另一个优点是您可以稍微修改它以允许与IE6兼容的CSS翻转图像：

<强> HTML：

<li id="selected"><a href="http://www."><span>FAQ'S<span></a></li>

<强> CSS：

#menu li#selected {
  padding: 0;
  margin:0;
  height: 35px;
}

#menu #selected a {
  display: block;
  background:url(nav-tab-left.gif) bottom left no-repeat #90288d;
  height: 35px;
  padding: 0;
  margin: 0;
}

#menu #selected a span {
  display: block;
  background:url(nav-tab-right.gif) bottom right no-repeat;
  height: 35px;
  line-height: 35px; /* Centers the text vertically */
  padding: 0 6px;    /* Gives 6px of horizontal padding to the text */
  margin: 0;
}

/* Hovered, so let's change the colors and the images */
#menu #selected a:hover {
  background:url(nav-tab-left-hover.gif) bottom left no-repeat #902B27;
}

#menu #selected a:hover span {
  background:url(nav-tab-right-hover.gif) bottom right no-repeat;
}

是的，它确实适用于IE6及以下（及以上），因为a是IE6支持:hover伪类的唯一元素。这也是为什么此方法需要添加额外<span>代码的原因，因为我们无法以IE6理解的方式将<li>与:hover定位。

_{我建议使用CSS sprites而不是单独的图像来悬停效果，但为了让这个示例尽可能简单，我会保持原样。}

有关CSS选择器支持的更多信息，请参阅CSS - Contents and compatibility。

css：以后不行

2 个答案:

悬停变化