2

导航菜单

我有导航菜单，想在活动时添加图像并像这个屏幕截图一样悬停，如果菜单文本长或短，它应该正确设置。

我的 HTML makup 如下所示，当链接处于活动状态时，我使用图像来实现自定义形状，但我不知道如何实现悬停。请帮忙。

ul#navigation li {
float: left;
list-style: none outside none;
}
ul li a  {
color: #000000; 
text-decoration: none;
}

ul#navigation li.left_bg.starter_active {
    background: url("http://new.nsracing.ch/themes/nsracing/images/btn_left.png")     no-repeat scroll 0 center transparent;
    height: auto;
    padding: 0 0 0 28px;
    width: auto;
}

ul#navigation li .right_bg.starter_active {
    background:url("http://new.nsracing.ch/themes/nsracing/images/btn_rght.png") no-repeat scroll 100% center transparent;
    float: left;
    height: auto;
    padding-right: 23px;
 }

ul#navigation li a.starter_active {
    background: url("http://new.nsracing.ch/themes/nsracing/images/btn_cntr.png")    repeat-x scroll 0 0 transparent;
    padding: 9px 0 6px;
}

在此处输入图像描述

有没有办法使用任何 css 或 jquery 制作这样的形状？

4

2 回答 2

0

您需要使用 CSSTransform来border-radius实现您正在寻找的东西。您可以在下面阅读有关相同内容的更多信息。

https://developer.mozilla.org/en-US/docs/Web/CSS/transform - 用于变换 https://developer.mozilla.org/es/docs/CSS/border-radius - 用于边界半径

希望这可以帮助。

于 2013-10-21T06:40:16.740 回答
0

类似平行四边形的东西

ul#navigation li.a:hover{ width: Xpx; height: Ypx; -webkit-transform: skew(zdeg); -moz-transform: skew(zdeg); -o-transform: skew(zdeg); background: yellow; }
于 2013-10-21T06:57:49.173 回答