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

Question

我正在尝试在我悬停在导航菜单中的元素后面添加一个“文件夹”(不知道怎么调用它)，并且还停留在所选页面上。你可以在这里看到图片:

但是由于这是一个尺寸的图像，它对于我的一些元素来说太大了。

如何使这项工作成为可能的最佳方式？我应该使用 jQuery 还是坚持使用 CSS？

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

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

Answer 1

• 更改 background-image 以仅反射(reflect)橙色渐变(没有顶 Angular 处的曲线)。

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

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

类似于:

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