Html 如何仅在环绕图像的链接上激活悬停效果

a {
  text-decoration: none;
}
.mt-3 {
  margin-top: 1.5rem;
}
.text-light {
  color: #9c9c9c;
}
.home-banner-img {
  border-radius: 2px;
  height: 100px;
  width: 100%;
}

.hero-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 30px;
}

.hero-one a:hover {
  color: #00639e;
}

<div class="hero-wrapper">
  <div class="hero-one">
    <a href="#" class="text-light">
      <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80" alt="hero-post" class="home-banner-img">
      <h1 class="mt-3">This is a post</h1>
    </a>
  </div>
</div>

.hero-one a:hover {
  color: #00639e;
}

.hero-one h1:hover {
  color: #00639e;
}

a {
  text-decoration: none;
}
.mt-3 {
  margin-到p: 1.5rem;
}
.text-light {
  color: #9c9c9c;
}
.home-banner-img {
  border-radius: 2px;
  height: 100px;
  width: 100%;
}

.hero-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 30px;
}

.hero-one h1:hover {
  color: #00639e;
}

<div class="hero-wrapper">
  <div class="hero-one">
    <a href="#" class="text-light">
      <img src="https://images.unsplash.com/pho到-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&au到=format&fit=crop&w=1173&q=80" alt="hero-post" class="home-banner-img">
      <h1 class="mt-3">This is a post</h1>
    </a>
  </div>
</div>

Html相关问答推荐

悬停时跳转的内容

只有一行上有溢出的CSS网格

如何在css中将包含多行文本的多个p-tag放在一起(并排)？

在Chrome中使用手写笔时，滚动条方向反转

有没有一种方法可以动态地从网格或Flexbox中取出HTML元素？

这<；td&>如何溢出<；表>；？

当光标悬停在(相同)父元素上方时，为多个子元素创建不同的过渡动画

SVG动画只有在打开S开发工具的浏览器时才开始播放

有没有办法移动占位符？

Swift WkMessageHandler 消息不发送

在 laravel 中使用 DomPDF 将数据导出为 pdf 时，第二列被拉伸

HTML 重定向到当前服务器

如何保持块扩展以填充视口？

如何更改 Quarto 中标签crossref-def-title的标题 colored颜色 ？

如何制作一个布局，其中左侧固定为图像，右侧为按钮，中心或中间位置为文本？

如何使 Shiny 中的 selectInput Select 扩展到井面板之外或以其他方式使它们更容易被用户看到？

将表格标题和过滤器调整到表格的顶部边缘

鼠标悬停时切换 colored颜色 的双色链接

使用 rgba() 的 css 中的边框不透明度不起作用

如何自定义具有白色透明背景的光标图像？