html - 我如何使用 Materialise 在垂直 FAB 中拥有水平 FAB？-6ren

html - 我如何使用 Materialise 在垂直 FAB 中拥有水平 FAB？

转载作者：行者123 更新时间：2023-11-28 00:58:34

29

4

我正在尝试使用 Materialize 在垂直 FAB 内创建水平 FAB。下面的代码几乎可以完美运行，但是每当我将鼠标悬停在主 FAB 上时，它都会切换主 FAB 和第二个 FAB，但我只想在将鼠标悬停在共享按钮上时打开第二个 fab。 (第二个 FAB 按钮)
我正在使用 Materialise 0.100.2。
我还创建了一个 working pen here .

.FAB2 {
 position: relative !important;
    display: inline-block;
    right: 24px !important;
    right: 17px !important;
    bottom: 0 !important;
  padding: 0 0 0 25px !important;
}
.FAB2-li {
  margin: 0 15px 0 0 !important;
}

<!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">


      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
       <div class="fixed-action-btn">
    <a class="btn-floating btn-large red">
      <i class="large material-icons">mode_edit</i>
    </a>
    <ul>
      
      <li class="fixed-action-btn horizontal FAB2">
  <!--Share button-->
  <a class="btn-floating red">
      <i class="large material-icons">share</i>
    </a>
    <!--End of share button-->
    <ul>
      <li class="FAB2-li"><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
      <li class="FAB2-li"><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
      <li class="FAB2-li"><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
      <li class="FAB2-li" style="margin-right: 0px !important;"><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
    </ul>
  </li>
      
      <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
      <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
      <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
      <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
    </ul>
  </div>
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

    </body>
  </html>

最佳答案

.FAB2 {
 position: relative !important;
    display: inline-block;
    right: 24px !important;
    right: 17px !important;
    bottom: 0 !important;
  padding: 0 0 0 25px !important;
}
.FAB2-li {
  margin: 0 15px 0 0 !important;
}
li.fixed-action-btn.horizontal.FAB2>ul {
    opacity:0 !important;
    transition:0.2s all;
}
li.fixed-action-btn.horizontal.FAB2:hover >ul {
    opacity:1 !important;
}

<!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">


      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
       <div class="fixed-action-btn">
    <a class="btn-floating btn-large red">
      <i class="large material-icons">mode_edit</i>
    </a>
    <ul>
      
      <li class="fixed-action-btn horizontal FAB2">
  <!--Share button-->
  <a class="btn-floating red">
      <i class="large material-icons">share</i>
    </a>
    <!--End of share button-->
    <ul>
      <li class="FAB2-li"><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
      <li class="FAB2-li"><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
      <li class="FAB2-li"><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
      <li class="FAB2-li" style="margin-right: 0px !important;"><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
    </ul>
  </li>
      
      <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
      <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
      <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
      <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
    </ul>
  </div>
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

    </body>
  </html>

只需在下面添加 css 即可...

li.fixed-action-btn.horizontal.FAB2>ul {
    opacity:0 !important;
    transition:0.2s all;
}
li.fixed-action-btn.horizontal.FAB2:hover >ul {
    opacity:1 !important;
}

关于html - 我如何使用 Materialise 在垂直 FAB 中拥有水平 FAB？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52810768/

29

4

0

文章推荐： jQuery resize 在被触发时导致丑陋的 "jump"

文章推荐： python - 在 Pelican HTML 页面中使用 PAGE_ORDER_BY = 'page-order'

文章推荐： scrolltop 上的 javascript 动画 div 高度 + 背景颜色

文章推荐： angular - 为 Angular 6 中的所有组件设置通用背景

css - 如何在不使用 Materialise Css 的情况下从头开始创建 Materialise Css 输入设计和功能？
如何创建具有特殊功能的 Materialize CSS 输入，例如输入中的占位符和图标？我想找到一种不使用 materialize CSS 来创建它的方法，因为我正在使用另一个 CSS 框架并且我不想
jquery - Materialise - 可折叠的大量内容不会滚动到选项卡顶部
我使用collapsible component provide by materialize framework 。我遇到一个错误，但不知道如何解决它或找到解决方法。如果一个选项卡的内容太大，当我打
javascript - Materialise 日期选择器在事件中打开
我正在尝试在点击事件上打开具体化的日期选择器。这是我的jsp Birthdate today 对于我的脚本: $(document).ready(function(){
javascript - Materialise 获取模态触发元素
如何获取触发 Materialize Modal 的元素？鉴于此代码: Item 1 Item 2 Item 3 Edit Model ... Clo
javascript - Materialise 模态未打开
您好，我正在使用 Materialise js，它的模态未打开，以下是我的代码。请告诉我它有什么问题吗？ Modal Header
javascript - Materialise 轮播箭头在移动设备上不起作用
我有一个使用 Materialize 的全 Angular 轮播，其中有一些箭头指示下一个和上一个轮播元素。在桌面上运行良好，但在移动设备上不起作用。我一直在研究它，据说这个元素存在一个他们没有掩盖的
javascript - Materialise - 如何在多重选择中动态选择选项？
我有一个多重选择元素，我想动态选择选项的混合，如下所示: 我能够动态选择一个选项，但仅此而已， document.getElementById('update_days_of_the_week').s
javascript - Materialise 固定侧边栏关闭
我有一个始终可见的 Materialise 固定侧导航。我想添加打开和关闭它的按钮。如果我将 $('.sidenav').sidenav('close') 添加到按钮，它只能关闭侧边栏；与 $('.
jquery - Materialise 自动完成不起作用
我正在测试 Materialize 的自动完成功能，但由于某种原因它不起作用。这是我的代码: Stamboom
javascript - 动态选择不适用于 Materialise
具体化 css 不适用于动态选择。它与国家合作良好，但不显示国家。我认为 jquery 有问题。请检查我的代码片段。我已经检查了互联网上的所有内容。但对我来说没有任何用处。 var countr
javascript - Materialise 中与预填充内容重叠的标签
这个问题在这里已经有了答案: Using page's angular JS in chrome extension (3 个答案) 关闭 6 年前。我想做的是填写一个使用 Materialize
html - Materialise 预加载器
我是网页设计的新手，我发现了 MaterializeCSS 框架(与 Bootstrap 的目的相同)。所以我找到了预加载器代码，但遗憾的是我不知道将它准确放置在哪里。我希望这个循环加载器在轮播加
javascript - Materialise 可折叠导航不工作
我不完全确定为什么我的可折叠下拉菜单不起作用。我已经导入了 materialize 和 jQuery，它们都在工作，但可折叠菜单在单击时没有任何作用。 Cr
css - Materialise 不会覆盖我现有的类
我有一个 jsp 页面，我想使用 Materialize 框架对其进行样式设置，但是一旦我将 href 添加到页面中的 materialize.min.css(或在整个元素中)，它覆盖了所有应用程序中
javascript - Materialise 中的导航栏上没有侧边菜单按钮。
我使用的是 materialize.min.css 和 materialize.min.js，没有其他样式表。我做了一个简单的网页。代码: {% load static %} TITLE
css - Materialise 响应实用程序不工作
我不明白为什么实用程序“show-on-small”等不起作用。尽管以下脚本应该只在小屏幕上显示，但它一直显示(请注意其他实体化类也可以工作，所以并不是我不能访问它们的文件)。例子: Only
html - Materialise 上的卡片内容不属于同类
我在我的页面中使用了卡片，页面看起来像这样 cards 你可以看到我的卡片内容和描述在我的图片中，我遵循来自 materialize 的指南但它在我的页面上不起作用这是我的代码
jquery - Materialise 移动导航栏没有响应
我在 Rails 元素中使用 Materialize，我不确定为什么可折叠导航栏转换没有响应。 _nav.html.erb LOGO menu
html - Materialise 中的标签覆盖问题
我正在使用 Materialise 开展一个元素。我面临有关文本框中预填值的问题。下面是截图: User Name * $(document).ready(fun
html - Materialise - 模态在移动设备中正在缩小
我用 materialziecss 库完成了这个程序。 MY Model IS like this first But when I try to focus on that and try to t

首页

博学

6Ren·AI

商城

html - 我如何使用 Materialise 在垂直 FAB 中拥有水平 FAB？