鼠标滑过div出现另一个div并且点击会固定

靓靓的圆子

于 2023-05-08 16:04:56 发布

阅读量831

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.youkuaiyun.com/weixin_45646663/article/details/130561104

版权

该代码段展示了如何使用JavaScript根据点击事件和条件来切换一个div元素的可见性。当滑过特定内容时，一个具有固定诊断功能的div会显示或隐藏，其样式由CSS定义，包括位置、颜色和透明度。点击事件处理函数FixedDiagnosis()控制着元素的显示状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，

<div style="margin-left: 36px;" class="list-body-swiper-item1">
  <ul class="p-info">
    <li><img :src="pInfo.source"/></li>
  </ul>
  <p class="list-body-swiper-item"> 滑过我的时候</p>
  <div @click.stop="FixedDiagnosis()" class="FixedDiagnosis" id="FixedDiagnosis1">
    <i class="iconfont iconpin4" style="color:#000;padding: 3px;"></i>
    出现另一个div。。。。。。。</div>
</div>

//固定诊断
FixedDiagnosis(){
    let box = document.getElementById("FixedDiagnosis1");
    if(this.num % 2 === 0){
      box.style.display="none";
    }else{
      box.style.display="block";
    }
    this.num++
  },

.FixedDiagnosis{
  display: none;
  position: absolute;
  top: -8px;
  left: 55%;
  background-color: rgba(255,128,0,0.9);
  cursor: pointer;
  border-radius: 10px;
  padding: 5px;z-index: 3;
}
.list-body-swiper-item1:hover > .FixedDiagnosis{
  display: block !important;
}