js如何实现鼠标悬浮显示链接

Posted 2023-03-25

就像这样，鼠标移出不显示“删除问题”，悬浮就显示

这个可以完全用css来实现，不需要js的参与：

<style>
#box .link display:none
#box:hover .link display:inline
</style>
<div id="box">
   <div>XXXXXXXXXXXXXXX</div>
   <div>
      <span>1111111</span>
      <span> 2222 </span>
      <span>....aaa....</span>
      <span class=link><a href="#">删除问题</a></span>
   </div>
</div>

参考技术A js实现可以通过控制元素的display属性，鼠标滑入整行时可以将“删除问题”所在元素的display属性设为"block"(不是"none"就行)，滑出时设置display为'none'。（建议通过css的hover控制。） 参考技术B

使用简单的html+CSS代码就可以了：

<div class="group">
    <h1>大字标题</h1>
    <span>1分钟前|浏览7次|汽车 刹车片</span>
    <span class="delete">删除问题</span>
</div>
<style>
    .group .deletedisplay:none
    .group:hover .deletedisplay:unset
</style>

本回答被提问者和网友采纳 参考技术C 不需要js就可以实现，通过css hover实现