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

【问题标题】：Create custom shape background image on Menu hover using css and jquery使用 css 和 jquery 在菜单悬停上创建自定义形状背景图像
【发布时间】：2014-07-30 15:27:33
【问题描述】：

导航菜单

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

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

【问题讨论】：

标签： jquery html css

【解决方案1】：

类似平行四边形的东西

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

【讨论】：

谢谢 sai 。 css 属性 skew 给出了近似的输出。我使用了以下标记。 ul#navigation li a:hover { 背景颜色：#F4DD25;边框半径：13px 0 15px 0；显示：内联块；填充：8px 19px；变换：skewX(-22deg); } ul#navigation li a span { display: inline-block;变换：skewX(10deg); -o-transform: skewX(10deg); -moz 变换：skewX（10 度）； -webkit-transform: skewX(10deg); }

【解决方案2】：

您需要使用 CSS Transform 和 border-radius 来实现您想要的。您可以在下面阅读更多相关信息。

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

希望这会有所帮助。

【讨论】：