Question

我有一个由ul和li组成的菜单，列表项将SVG嵌套为将显示在菜单中的项目。在第一个ul内部，li嵌套了另一个ul，li，它显示为悬停为子菜单，一切正常，但我想在项目菜单中围绕我的SVG创建一个填隙填充，这样当我稍微离开图像时，子菜单仍然会出现。

我搜索了一下并找到了一些使用伪类:: after的方法，但没有设法让它工作

这是我的代码

<div id="menu">
<ul>
 <li> <img  src="this is just for code"/>
 <ul>
 <li> <a href="#">link</a></li>
 <li> <a href="#">link2</a>/li>
 </ul>
 </li>
 <li> <img  src="this is just for code"/>
  <ul>
  <li> <a href="#">link</a></li>
  <li> <a href="#">link</a></li>
 </ul>
  </li>

css是

#menu ul li{
    width:auto;   
    height:2.5em;   
    list-style:none;
    float:left;
    margin: 0em 20px 0em 20px ;
    padding: 0px  ;   
    cursor:pointer;
    justify-content:space-between;

 #menu ul ul li{
float:none;
width:100%;
height:auto;
padding: 1em 0;
text-align:center;

 #menu ul li:hover > ul{

display:block;  }

   #menu ul li img{
        width:inhrtit;
        height:inherit;
        margin: 0 0 60px 0;
        position:relative;
        bottom:0.6em;


        }   

   #menu ul li:hover > ul::after{
        width:auto;
        height:2.5em;
        padding:0px 100px;
        margin: 90px;
        position:absolute;
        right:70px; left:90px;
        pointer-events: none;
        -webkit-transform: translateX(-110%);
        transform: translateX(-110%);

        }
    #menu ul li:hover > ul::after   {
pointer-events: auto;

    }

抱歉，我的代码很糟糕。作为第一个问题，我希望这不是一个足够的转储。

Answer 1

由于您希望增加<li>元素的悬停区域，因此可以为其添加填充。

例如，下面是使用填充增加可点击区域的示例。增加悬停区域是类似的。

https://jsfiddle.net/gazg1yuy/

菜单项中svg图像之间的间隙填充

1 个答案: