フレックスボックスを使用しているときに、フレックス列にある3つのボタンを左にスライドさせてホバーすると表示するにはどうすればよいですか?

user2763557

フィドルリンク

.container {
  display: flex;
  flex-direction: column;
  border: 2px solid blue;
}

.mainCont {
  display: flex;
  background-color: #f2f2f2;
  min-height: 5em;
  justify-content: space-between;
}

.btn-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 6em;
}

.allButton,
.onButton,
.offButton {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#circleAll {
  display: inline-flex;
  align-items: flex-start;
  background-color: blue;
  border-radius: 50%;
  width: .5em;
  height: .5em;
}
<!DOCTYPE html>

<head>
  <title>testpage</title>
</head>

<body>
  <div class="container">
    <!--main container-->
    <div class='mainCont'>
      <!--heading container-->
      <h3 id="twitchHead">TWITCH STREAMERS</h3>
      <div class="btn-group">
        <button class='allButton'><span id="circleAll"></span><span id="onAll">All</span></button>
        <button class='onButton'><span id="circleAll"></span><span id="on1">Online</span></button>
        <button class='offButton'><span id="circleAll"></span><span id="off1">Offline</span></button>
      </div>
</body>

ですから、最初は青い円だけを表示したいと思います。次に、ユーザーがそれらの1つにカーソルを合わせると、左にスライドして、[すべて] / [オンライン] / [オフライン]ボタンがあるかどうかが表示されます。一度に1つだけできるようにしたいと思います。

スライドしてホバーする方法は知っていますが、ボタンとテキストを非表示にして、マウスがボタンの上にない場合にのみボタンの青い点の部分を表示する方法がわかりません。

どうすればこれを最もよく達成できますか?

BSK

これを実現する1つの方法があります。私が変更されますので、重複したIDのを使用しないでくださいcircleAllクラスにも追加.btnし、.textより簡単にターゲティングするためのクラス。好みに合わせてさらに編集し、Flexboxのプレフィックス付きスタイルと、より幅広いブラウザサポート用のトランジションを追加することもできます。

.container {
  display: flex;
  flex-direction: column;
  border: 2px solid blue;
}

.mainCont {
  display: flex;
  background-color: #f2f2f2;
  min-height: 5em;
  justify-content: space-between;
}

.btn-group {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  justify-content: center;
}

.allButton,
.onButton,
.offButton {
  display: flex;
  align-items: center;
}

.circleAll {
  display: inline-flex;
  align-items: flex-start;
  background-color: blue;
  border-radius: 50%;
  width: .5em;
  height: .5em;
  margin-right: 0px;
  transition: margin-right .3s ease 0s;
}
.btn:hover .circleAll,
.btn:focus .circleAll {
  margin-right: 5px;
}
.text {
  max-width: 0px;
  overflow: hidden;
  display: block;
  transition: max-width .3s ease 0s;
}
.btn:hover .text,
.btn:focus .text {
  max-width: 50px;
}
<div class="container">
  <!--main container-->
  <div class='mainCont'>
    <!--heading container-->
    <h3 id="twitchHead">TWITCH STREAMERS</h3>
    <div class="btn-group">
      <button class='allButton btn'>
        <span class="circleAll"></span>
        <span id="onAll" class="text">All</span>
      </button>
      <button class='onButton btn'>
        <span class="circleAll"></span>
        <span id="on1" class="text">Online</span>
      </button>
      <button class='offButton btn'>
        <span class="circleAll"></span>
        <span id="off1" class="text">Offline</span>
      </button>
    </div>
  </div>
</div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

Related 関連記事

ホットタグ

アーカイブ