悬停变化

Question

你好我有一个这样的菜单：

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

我已经设法在Firefox中实现我想要的效果，但后来我在IE 7和phwoooar中检查了它... 它似乎是一个宽度问题，一开始我试图阻止宽度黑客但然后这让firefox感到不安：

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

#menu #selected a {background:url(nav-tab-right.gif) bottom right no-repeat;height: 25px;}
#menu #selected p { padding: 0 10px; margin:4px; }

另一个问题是，右边的图像似乎挂得比左边的图像更高！

Answer 1

你不能拥有<p> - 一个块级元素 - 在<a>内 - 一个内联元素。它将由不同的浏览器不一致地呈现。

尝试更改为

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

图像问题是因为height属性不适用于内联元素，因此您的高度：25px被忽略。使用填充将图像移动到位。

#menu #selected a 
background:transparent url(nav-tab-right.gif) no-repeat scroll right bottom;
padding-bottom:16px;
}

Answer 2

<p>是一个块级元素。您不能将其放在内联元素（<a>）中。您可以执行以下操作：只需删除<p>，然后使用CSS将<a>标记显示为块。

<强> 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;
}

这适用于所有浏览器，并且不会使用无用的元素使您的标记混乱。

悬停变化

使用此方法的另一个优点是您可以稍微修改它以允许与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。

IE错误修复的图像放置

2 个答案:

悬停变化