html - 悬停时如何使我的子边框与父边框重叠?

标签 html css

我有一个带有红色边框的 parent 。当用户将鼠标悬停在 child 身上时,我试图更改 child 的边框以与 parent 重叠。我怎样才能做到这一点?

.parent{
  border:1px solid red;
  display:inline-block;
}

.parent a {
  display:block;
  padding:1em;
  border-bottom:1px solid #ddd;
}

.parent a:hover{
  border:1px solid #ddd;
}
<div class="parent">
      <a href="#">1</a>
      <a href="#">2</a>
      <a href="#">3</a>
      <a href="#">4</a>
      <a href="#">5</a>
    </div>

最佳答案

我对你的风格做了一些改变:

.parent{
  display:inline-block;
}

.parent a {
  display:block;
  padding:1em;
  border-right:1px solid red;
  border-left:1px solid red;
  border-bottom:1px solid #ddd;
  border-top: none;
}

.parent a:first-of-type{
  border-top:1px solid red;
}

.parent a:last-of-type{
  border-bottom:1px solid red;
}

.parent a:hover{
  border-color:#ddd;
}

在这里查看结果 https://jsfiddle.net/IA7medd/343ydvhs/

关于html - 悬停时如何使我的子边框与父边框重叠?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37212365/

相关文章:

html - Glyphicon 的悬停效果偏移 - Bootstrap 3

Javascript - 检查网站是否正在播放 iframe 音频

python - Python/BeautifulSoup 有没有办法在相似行的列表中选择特定行?

javascript - 用 JavaScript 隐藏一个 html div

html - Flex/Grid 布局不适用于按钮或字段集元素

html - 保持所有 LI 的边框高度相同

javascript - 是否有可能在 JS 和 jQuery 中处理除 'this' 之外的同一类的所有元素

css - 可折叠下拉菜单 - 为处于事件状态的菜单设置背景?

javascript - 菜单颜色和菜单问题

html - 文本应显示为两行