开发者社区> 问答> 正文

这个鼠标移动到这个板块,展示出来,通过宜搭自定义页面怎么实现

image.png

展开
收起
游客br3ovivgmfdaq 2024-04-17 15:10:41 127 0
来自:钉钉宜搭
2 条回答
写回答
取消 提交回答
  • 如果问题得到了解决,辛苦点下采纳回答哦~

    选中容器,右边操作栏-样式,给容器设置透明度 0,当鼠标hover的时候,给容器设置透明度
    如下:
    image.png

    :root {
      opacity: 0;
    }
    :root:hover {
      opacity: 1;
    }
    
    2024-04-18 09:52:52
    赞同 2 展开评论 打赏
  • 深耕大数据和人工智能

    要在宜搭自定义页面实现鼠标移动到板块时展示出来,你可以使用CSS和JavaScript来实现。以下是一个简单的示例:

    首先,在HTML中创建一个板块和一个隐藏的内容区域:

    html
    复制代码运行

    鼠标移动到这里

    这里是隐藏的内容

    接下来,使用CSS设置隐藏内容的样式:

    css
    复制代码运行
    .hidden-content {
    position: absolute;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    padding: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    最后,使用JavaScript监听鼠标移动事件,并在鼠标移入板块时显示隐藏内容,移出时隐藏内容:

    javascript
    复制代码运行
    document.querySelector('.block').addEventListener('mouseenter', function() {
    document.querySelector('.hidden-content').style.display = 'block';
    });

    document.querySelector('.block').addEventListener('mouseleave', function() {
    document.querySelector('.hidden-content').style.display = 'none';
    });

    将以上代码添加到宜搭自定义页面的代码编辑器中,即可实现鼠标移动到板块时展示隐藏内容的功能。

    2024-04-17 15:47:20
    赞同 展开评论 打赏
问答分类:
问答地址:
关联地址:
相关产品:
来源圈子
更多
收录在圈子:
+ 订阅
「宜搭」是云钉原生低代码平台(钉钉 PaaS - aPaaS),让企业应用搭建更简单! 帮助中小企业降本提效,加强组织的数字化自主权; 帮助大型企业释放个体创新力,助力组织创新涌现。
相关文档: 宜搭
问答排行榜
最热
最新

相关电子书

更多
宜搭 - 企业智能化应用搭建平台 立即下载
《云市场-宜搭解决方案》 立即下载
《宜搭开发手册》 立即下载