Как я могу иметь горизонтальный FAB в вертикальном FAB, используя Materialize? - PullRequest
Новая
       6

Как я могу иметь горизонтальный FAB в вертикальном FAB, используя Materialize?

0 голосов
/ 15 октября 2018

Я пытаюсь создать горизонтальный FAB внутри вертикального FAB, используя Materialize.Приведенный ниже код работает почти идеально, но всякий раз, когда я наводю курсор мыши на основной FAB, он переключает основной FAB и второй FAB, но я хочу открывать второй FAB только при наведении курсора на кнопку «Поделиться».(Вторая кнопка FAB)
Я использую Materialise 0.100.2.
Я также создал рабочую ручку здесь . 

.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>

1 Ответ

0 голосов
/ 15 октября 2018 

.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;
}
...