鼠标经过弹出div

Posted 2023-04-06

我想实现这样的效果，鼠标滑过，弹出一个div，能够点击里面的链接，鼠标移开后，div消失。

参考技术A 有两个方法，一个是js的，优点能兼容所有浏览器还能控制弹出时间和方式，缺点是代码较多，需要懂一点js知识；还有个方法是css，设置隐藏层，当鼠标移到对应的区域，显示隐藏层，优点是代码少容易理解和应用，缺点是ie6不支持。如：
<style>
.aawidth:100px;height:30px;position:relative
.aa .bbwidth:100px;height:60px;position:absolute;display:none;border:1px solid #ddd;top:30px;left:0

.aa:hover .bbdisplay:block
</style>

<div class="aa">移到我上面看看
<div class="bb">显示结果</div>
</div>本回答被提问者和网友采纳

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

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

这个可以完全用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实现