jquery - 导航 - a:hover 和 a:selected 上的图像

Question

我正在尝试在导航菜单中悬停的项目后面添加一个“文件夹”（不知道该怎么称呼它），并且还停留在所选页面上。你可以在这里看到图像：

但由于这是一个单一尺寸的图像，它对我的​​一些物品来说太大了。

我如何使这项工作成为最好的方式？我应该使用 som jQuery 还是只使用 CSS？

你可以看到我到目前为止所做的：“在找到解决方案后删除了我的链接”

希望你能给我一些有用的答案。:)

Answer 1

• 更改background-image以仅反映橙色渐变（没有顶角的曲线）。

• border-radius底部的圆角使用 CSS 。

• 将顶角曲线切割成单独的图像并使用 CSS':before并将:after图像相应地放置在左右角。

就像是：

#nav a:hover
    {
    background-image: url('orange_gradient.png'); /* could be 1px wide */
    background-repeat: repeat;
    border-radius: 0 0 10px 10px;
    }

#nav a:hover:before
    {
    content: url('curve.png');
    display: inline-block;
    position: absolute;
    left: 0;
    margin-top: -50px;
    }

#nav a:hover:after
    {
    content: url('curve.png');
    display: inline-block;
    position: absolute;
    right: 0;
    margin-top: -50px;
    }

Answer 2

一句话推拉门效果

老但很好的原始技术

http://alistapart.com/article/slidingdoors