Javascript 图像将链接触发范围扩展到全宽

我有一个移动菜单，里面有一些项目。每个项目都是一个链接。第一个项目是徽标，其他项目是基于文本的链接

基于文本的链接与其文本一样大。因此，如果单击div容器，链接将不会触发

我为我的问题提供了一个完整的例子

$（文档）.ready（（）=>{
$（“#btnMenu”）。单击（（）=>{
切换菜单（）；
});
$（“.navbarLink”）。单击（（）=>{
if（$（“#navbarItems”）.hasClass（“activeNavbar”））{
切换菜单（）；
}
});
});
函数切换菜单（）{
$（“#navbarItems”）.toggleClass（“activeNavbar”）；
toggleMenuBtn（）；
}
函数toggleMenuBtn（）{
$（“#btnMenu”）.toggleClass（“activeMenuBtn”）；
}

.link{
文字装饰：无；
}
身体{
保证金：0；
}
#导航栏{
高度：60px；
排名：0；
左侧填充：200px；
右边填充：200px；
位置：粘性；
背景：#1e222a；
}
#导航设备{
身高：100%；
显示器：flex；
对齐项目：居中；
}
#标识链接{
显示器：flex；
对齐项目：居中；
}
#navbarItems.navbarItemContainer:不是（：第一个子项）{
左边距：30px；
}
.navbarItemContainer{
背景：#1e222a；
}
.navbarLink{
字体大小：粗体；
颜色：#ffffff；
}
.navbarLink:悬停{
颜色：#3abcf3；
}
#btnMenuContainer{
身高：100%；
显示：无；
}
#btnMenu{
光标：指针；
}
menuBtnBar先生{
宽度：35px；
高度：5px；
利润率：6px0；
背景色：#ffffff；
过渡：0.4s；
}
.activeMenuBtn#barTop{
变换：旋转（-45度）平移（-9px，6px）；
}
.activeMenuBtn#酒吧中心{
不透明度：0；
}
.activeMenuBtn#barBottom{
变换：旋转（45度）平移（-8px，-8px）；
}
@介质（最大宽度：1200px）{
#导航栏{
左侧填充：150px；
右侧填充：150px；
}
}
@介质（最大宽度：1100px）{
#导航栏{
左侧填充：0；
右边填充：0；
}
#navbarItems.navbarItemContainer:不是（：第一个子项）{
左边距：0；
}
#navbarItems.navbarItemContainer:不是（：最后一个子项）{
边框底部：1px实心#6767；
}
#btnMenuContainer{
显示器：flex；
对齐项目：居中；
}
#btnMenu{
左边距：20px；
}
#导航设备{
左边距：0；
显示：无；
}
#标识链接{
显示：块；
}
.纳瓦巴利姆{
宽度：100%；
文本对齐：居中；
填充：30px0；
}
#navbarItems.activeNavbar{
显示：块；
}
}

您的id为

#logolink

的锚具有

显示：块

（或

显示：弹性

，具体取决于视口大小），因此它会展开以填充其容器。我删除了这些样式，它看起来就像你想要的那样，只在实际图像上注册了一个鼠标悬停

$（文档）.ready（（）=>{
$（“#btnMenu”）。单击（（）=>{
切换菜单（）；
});
$（“.navbarLink”）。单击（（）=>{
if（$（“#navbarItems”）.hasClass（“activeNavbar”））{
切换菜单（）；
}
});
});
函数切换菜单（）{
$（“#navbarItems”）.toggleClass（“activeNavbar”）；
toggleMenuBtn（）；
}
函数toggleMenuBtn（）{
$（“#btnMenu”）.toggleClass（“activeMenuBtn”）；
}

.link{
文字装饰：无；
}
身体{
保证金：0；
}
#导航栏{
高度：60px；
排名：0；
左侧填充：200px；
右边填充：200px；
位置：粘性；
背景：#1e222a；
}
#导航设备{
身高：100%；
显示器：flex；
对齐项目：居中；
}
#标识链接{
}
#navbarItems.navbarItemContainer:不是（：第一个子项）{
左边距：30px；
}
.navbarItemContainer{
背景：#1e222a；
}
.navbarLink{
字体大小：粗体；
颜色：#ffffff；
}
.navbarLink:悬停{
颜色：#3abcf3；
}
#btnMenuContainer{
身高：100%；
显示：无；
}
#btnMenu{
光标：指针；
}
menuBtnBar先生{
宽度：35px；
高度：5px；
利润率：6px0；
背景色：#ffffff；
过渡：0.4s；
}
.activeMenuBtn#barTop{
变换：旋转（-45度）平移（-9px，6px）；
}
.activeMenuBtn#酒吧中心{
不透明度：0；
}
.activeMenuBtn#barBottom{
变换：旋转（45度）平移（-8px，-8px）；
}
@介质（最大宽度：1200px）{
#导航栏{
左侧填充：150px；
右侧填充：150px；
}
}
@介质（最大宽度：1100px）{
#导航栏{
左侧填充：0；
右边填充：0；
}
#navbarItems.navbarItemContainer:不是（：第一个子项）{
左边距：0；
}
#navbarItems.navbarItemContainer:不是（：最后一个子项）{
边框底部：1px实心#6767；
}
#btnMenuContainer{
显示器：flex；
对齐项目：居中；
}
#btnMenu{
左边距：20px；
}
#导航设备{
左边距：0；
显示：无；
}
#标识链接{
}
.纳瓦巴利姆{
宽度：100%；
文本对齐：居中；
填充：30px0；
}
#navbarItems.activeNavbar{
显示：块；
}
}

---

您看到这种行为是因为有一个CSS的

display:block

设置为

#logonlink

#logoLink {
  display: block;
}

$（文档）.ready（（）=>{
$（“#btnMenu”）。单击（（）=>{
切换菜单（）；
});
$（“.navbarLink”）。单击（（）=>{
if（$（“#navbarItems”）.hasClass（“activeNavbar”））{
切换菜单（）；
}
});
});
函数切换菜单（）{
$（“#navbarItems”）.toggleClass（“activeNavbar”）；
toggleMenuBtn（）；
}
函数toggleMenuBtn（）{
$（“#btnMenu”）.toggleClass（“activeMenuBtn”）；
}

.link{
文字装饰：无；
}
身体{
保证金：0；
}
#导航栏{
高度：60px；
排名：0；
左侧填充：200px；
右边填充：200px；
位置：粘性；
背景：#1e222a；
}
#导航设备{
身高：100%；
显示器：flex；
对齐项目：居中；
}
#标识链接{
显示：内联块；
对齐项目：居中；
}
#navbarItems.navbarItemContainer:不是（：第一个子项）{
左边距：30px；
}
.navbarItemContainer{
背景：#1e222a；
}
.navbarLink{
字体大小：粗体；
颜色：#ffffff；
}