我有一个场景,我需要点击锚标签和div下的可点击.svg文件对象.

我有将display:inline-block添加到div(.svg-wrapper)或锚标记的解决方案.然而,我需要Display:contents的锚标签以及对div由于一些css功能.

.component-content{
      display: flex;
      overflow: hidden;
}
a{
      display: contents;
}
.svg-wrapper{
  display: contents;
}
.svg-container{
    height: auto;
    align-self: start;
    padding: 0 19px 0 0;
    max-width: 50%;
    pointer-events: none;
}
<div class="component-content">
<a href="http://google">
<div class="svg-wrapper">
<object class="svg-container" type="image/svg+xml"  data="https://beta.designforventures.co/Free-Animated-SVG-Icons/warehouse/youtube-icon-dark-grey.svg">
<img  src="https://beta.designforventures.co/Free-Animated-SVG-Icons/warehouse/youtube-icon-dark-grey.svg">
</object>
</div>
</a> 
</div>

推荐答案

用另一个div包装对象元素.我找不到任何其他的解决方案. 看一看:https://jsfiddle.net/4qdLx5n9/2/

<div class="component-content">
  <a href="http://google">
    <div class="svg-wrapper">
      <div>
        <object class="svg-container" type="image/svg+xml" data="https://beta.designforventures.co/Free-Animated-SVG-Icons/warehouse/youtube-icon-dark-grey.svg">
          <img src="https://beta.designforventures.co/Free-Animated-SVG-Icons/warehouse/youtube-icon-dark-grey.svg">
        </object>
      </div>
    </div>
  </a>
</div>

@EDIT您的问题还有一个解决方案,在锚元素中添加position: absolute::after,在Component-Content中添加position:relative: https://jsfiddle.net/j7yx648w/3/

.component-content {
  display: flex;
  overflow: hidden;
  position: relative;
}

a {
  display: contents;
}

a:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.svg-wrapper {
  display: contents;
}

.svg-container {
  height: auto;
  align-self: start;
  padding: 0 19px 0 0;
  max-width: 50%;
  pointer-events: none;
}

Css相关问答推荐

单独.css文件中的样式不适用于Angular 元件

Angular Material:如何同时使用2个徽章

本机CSS嵌套混乱

基于高度的容器查询不起作用

2 列 UL,右列中的列表项数量为奇数?

为什么左浮动上的清除:左也会影响右浮动,以及如何避免它

当您到达页面底部时,如何使页脚 div 将附加的 div 向上推

SCSS - Lighten/Darken 不编译?

将 tailwincss 转换为普通 CSS?

如何在 Tailwind 中使用 `margin: y x;` 速记?

使用 CSS 填充悬停过渡的闪烁文本问题

CSS背景位置从顶部的给定像素开始?

如何将 Google 字体链接到我的 Nuxt 文件?

为什么我的 CSS 需要一个它似乎不需要的大括号?

css中的背景图像没有被缓存

Angular Material 中的样式垫 Select

中心表单提交按钮 HTML / CSS

更改最后一个
  • 的 CSS
  • 如何定位 CSS 网格布局中的特定列或行?

    :last-child 没有按预期工作?