html - 为 div 生成 CSS 模式
问题描述
我需要为我的菜单创建一个悬停(鼠标悬停)模式,类似于此(主页上的黄色悬停模式):
目前我正在做的是使用 3 张图像组合在一起生成一张悬停效果图像。左右图像保持原样,但中心图像设置为重复。这是因为菜单项文本可以是任意长度(例如:主页、常见问题和联系方式等)。参考截图:
除了使用 3 张图像之外,还有其他最佳解决方案可以实现这一目标吗?例如:在 CSS 中围绕 div 创建某种粗糙的边缘。我不确定如何做到这一点?
提前致谢。
解决方案
您也可以使用 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>
推荐阅读
- css - How to create dynamic HTML table in R
- python - 如何使用 Pandas 中的指定列创建新数据框?
- flutter - 与嵌套导航器和 BottomNavigationBar 一起使用时,PageStorage 不会保持滚动位置
- python - 执行具有列表异常的 randrange()
- json - 如何从 C3.ai COVID-19 API 请求 JSON 响应?
- java - 如何访问函数中的外部变量?
- python - 如何检查python字典中是否存在值?
- c++ - 用递归计算双引号内的字符
- python - Python OpenCV 形状检测在白板上不起作用
- .net - 在同一 IIS 服务器上部署 .net MVC 和 api 时,我是否应该将 localhost 用于我的 API