代码之家 › 专栏 › 技术社区 › user3382203

为div生成CSS模式

mousehover background design-patterns css html

user3382203 · 技术社区 · 4 年前

我需要为我的菜单创建一个悬停(鼠标悬停)模式,类似于(主页上的黄色悬停模式):

目前,我正在做的是使用3个图像组合在一起,以生成一个悬停效果图像。左右图像保持不变,但中心图像设置为重复。这是因为菜单项文本可以是任意长度的(例如:主页、常见问题解答和联系人等)。参考截图:

除了使用3张图像,还有其他最佳解决方案吗?例如:在CSS中围绕div创建一些粗糙的边。我不知道如何才能做到这一点?

提前谢谢。

0 回复 | 直到 4 年前

Pratik K. Tiwari 4 年前

您可以使用SVG实现同样的功能。对于SVG上的悬停效果,请使用JS事件处理程序。
运行代码段 检查它是如何工作的。

function fillBG() {
     document.getElementById('banner').style.fill = "#f6c43c";
}
function fillTransparent() {
     document.getElementById('banner').style.fill = "transparent";
}

#banner {
    fill: transparent;
    transition-duration: .3s;
}

<html>

<body>
    <svg width="260" height="170" onmouseover="fillBG()" onmouseout="fillTransparent()">
        <defs>
            <filter id="filter" height="1.4" width="1.4">
                <feTurbulence baseFrequency="0.1" numOctaves="2" type="fractalNoise" result="res" />
                <feDisplacementMap in2="res" scale="70" result="res_2" xChannelSelector="R" in="SourceGraphic" />
                <feComposite in2="res_2" in="SourceGraphic" operator="atop" result="fbSourceGraphic" />
            </filter>
        </defs>
        <rect id="banner" filter="url(#filter)" width="250" height="100" x="10" y="0" />
        <foreignObject width="250" height="100">
            <h1 style="text-align: center;">
                Header Info
            </h1>
        </foreignObject>
    </svg>
</body>

</html>