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

Question

Navigation Menu

I have navigation menu and want to add image on active and hover like this screenshot,and it should set properly if menu text is long or short.

My HTML makup is as given below, i have used images to acheive the custom shape when the link is active, but i dono how to acheive this for hover. Please help.

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

is there any way to make such shape using any css or jquery?

Answer 1

You need to use CSS Transform with border-radius to achieve what you are looking for. You can read more about the same below.

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

Hope this helps.

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