Fatal编程技术网
  • html/
  • Html 如何控制图像的可点击区域？CSS

Html 如何控制图像的可点击区域？CSS

html css

Html 如何控制图像的可点击区域？CSS,html,css,Html,Css,即使图像位于页面的中心，我也可以单击图像的整个宽度，这会干扰页面的汉堡包功能。我哪里出错了 CSS： .logo img{ margin-left: 7.8%; float:left; user-select: none; position: relative; z-index: 1; } @media (max-width: 769px) { .logo img{ float:none; display: block; margin-left: auto;

即使图像位于页面的中心，我也可以单击图像的整个宽度，这会干扰页面的汉堡包功能。我哪里出错了

CSS：

.logo img{
  margin-left: 7.8%;
  float:left;
  user-select: none;
  position: relative;
  z-index: 1;
}

@media (max-width: 769px) {
 .logo img{
  float:none;
  display: block;
  margin-left: auto;
  margin-right: auto;
 }
}

您有
.logo img
作为
显示：块
，它将占据其父容器的整个宽度。我会将其更改为
display:inline block

请看这里：（）

就像@Napoli sayed一样，因为我看不到您的html代码。。。您应该使用
display:inline block
，然后提供一个边距使其居中，如
margin:0 auto
您可以使用
display flex
轻松对齐项目
z-index:-1
将允许hamburger捕获事件而不是图像。尝试单击hamburger占位符div和图像，并查看相应的单击工作



/*样式在这里*/
标题{
高度：60px；
背景色：黑色；
位置：相对位置；
}
分区img-集装箱{
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：60px；
z指数：-1；
}
.汉堡包{
宽度：30px；
高度：30px；
背景：红色；
位置：绝对位置；
顶部：15px；
左：15px；
z指数：1；
}
img{
线高：80；
}




你能张贴小提琴、片段或完整的代码来重现这个问题吗？图像的哪个部分？图像中间的红场。是的，但是如果我这样做，图像就不会集中在任何地方。如果你想把它放在块上，那就好了。然后你需要调整你的汉堡包菜单（它应该绝对位于顶部（固定或其他），无论如何，只需确保z索引高于你的图像。这实际上取决于你的设计/html标记；但这里的一般问题是块升级。