使用css和jquery在菜单悬停上创建自定义形状背景图像

Question

导航菜单

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

我的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来制作这样的形状？

Answer 1

您需要将Transform与border-radius一起使用才能实现您的目标。 您可以在下面阅读更多相同内容。

https://developer.mozilla.org/en-US/docs/Web/CSS/transform - For Transform https://developer.mozilla.org/es/docs/CSS/border-radius - 对于border-radius

希望这有帮助。

Answer 2

像平行四边形

ul#navigation li.a:hover{ width: Xpx; height: Ypx; -webkit-transform: skew(zdeg); -moz-transform: skew(zdeg); -o-transform: skew(zdeg); background: yellow; }