创建一个按钮以显示在 <div> （css）中悬停时显示的 id [重复]

【问题标题】：create a button to id that showing on hover in <div> (css) [duplicate]创建一个按钮以显示在 <div> （css）中悬停时显示的 id [重复]
【发布时间】：2022-01-25 12:33:34
【问题描述】：

我想创建一个类似README.md (GitHub) 的按钮，当将鼠标悬停在# 标题上时，它将显示一个指向该ID image 的按钮链接。

我用 html 试过了：

<div id="headline"><a href="#headline" class="to">#</a> HEADLINE</div>

css:

a.to {
   display: none;
}

#headline:hover + a.to {
   display: block;
}

但它不起作用

【问题讨论】：

在 HTML 中将 <div id="#headline"> 更改为 <div id="headline">，在 CSS 中将 #headline:hover + a.to 选择器更改为 #headline:hover a.to。
@AmirrezaNoori 谢谢，把 id="#" 放到代码中是有效的，但我很糟糕

标签： html css

【解决方案1】：

这就是它的完成方式。您很接近，但 + 组合器仅适用于相邻元素。由于a 标记是div 的后代，因此不需要组合子。

.to{
  visibility: hidden;
}

#headline:hover .to{
  visibility: visible;
}

&lt;div id="headline"&gt;&lt;a href="#headline" class="to"&gt;#&lt;/a&gt; HEADLINE&lt;/div&gt;

还有一件事，要在 DOM 中滚动，href 属性将有一个#，后跟目标元素的id。因此，要滚动到 id 为“headline”的 div，href 属性的值将是 #headline。

【讨论】：

等等，我可以用display: none 代替visibility: hidden; 吗？
display: none; 基本上会删除元素，不会有空格。所以当你悬停时，HEADLINE 文字会向右移动，# 会出现。
visibility: hidden; 只是让它隐藏，同时仍然占用空间。查看您提供的链接，visibility: hidden; 是要走的路。