Question

我正在为wordpress工作，我正试图获得一个 “绘制”就像边框一样围绕着不同的菜单项。

至于现在，我有一个带有“绘制”圆圈的背景。（我们称之为bg.png）。

我可以在菜单项周围找到圆圈并将其放置正确。但是当然有些我的菜单项词比其他词长。

这就是我现在使用菜单活动部分的方式：

url('img/bg.png'); 
background-repeat: no-repeat; 
background-position-y: 10;

这会在悬停菜单项时显示圆圈，但在某些单词上也是如此大或小。这就像我正在使用的png：http://instantsplash.com/a/images/hand-drawn/circles/04.png

提前感谢！

Answer 1

我在以前的工作中遇到过类似的问题。

您必须决定是否要在特定项目上使用过大的大图片，或者如果文字较大则需要与您的项目重叠的小图片。

另一个解决方案是使用css中的background-size属性并将图像拉伸到容器的大小。但是这种解决方案可能导致比率或图像质量问题。

Answer 2

其中一个选项可能是你可以使用javascript / jQuery来测量悬停元素的大小，而不是调整'绘制'圆圈图像的大小。

$('li.menu-items').hover(function(){
   $(this).addClass('hovered').css('background-size', $(this).width());
},function(){
   $(this).removeClass('hovered');
})

如何创建＆＃39; Drawn＆＃39;菜单中的项目周围的样式线

2 个答案: