Question

我想创建一个侧边菜单，这是一个狭窄的右侧边栏，其中包含图标。可能有更多的图标/按钮，然后是可用的垂直空间，我想要实现的是将这些图标悬停在侧边栏上，剩下的图标将扩展到左边！请运行代码片段进行演示。我的问题是侧边栏上没有足够空间的图标由于我应用的弹性规则而被左侧包裹到一个新列中，这些是正确的，但这些元素不会有侧边栏的背景坏。我希望我的问题很清楚。感谢

＆＃13;

.container {
  width: 400px;
  height: 200px; 
  background-color: grey;
  display: flex;
  flex-direction: row;
}

.content {
  width: 100%;
  margin: 20px;
  border: 1px solid red;
  margin: 10px;
}

.sidebar {
  background-color: lightgrey;
  display: flex;
  flex-flow: column wrap-reverse;
  overflow: hidden;
}

.sidebar:hover { overflow: visible; }

.icon {
  width: 20px;
  height: 20px;
  padding: 5px;
}

.icon path { fill: white }

＆＃13;

<div class="container">
  <div class="content">hover over sidebar</div>
  <div class="sidebar">
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" />
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" />
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" />
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" />
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" />
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" />
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" />
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" />
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" />
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" />
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" />
  </div>
</div>

＆＃13;

Answer 1

侧边栏需要宽度，因为它会溢出内容。没有宽度，背景不会应用于悬停时溢出内容的部分。

以下是更新后的代码：https://jsfiddle.net/Lm6ey2sa/

希望有所帮助！

＆＃13;

<div class="container">
  <div class="content">hover over sidebar</div>
  <div class="sidebar">
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" />
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" />
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" />
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" />
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" />
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" />
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" />
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" />
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" />
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" />
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" />
  </div>
</div>

＆＃13;

// instantiate barcode detector in an Activity onCreate method
val barcodeDetector = BarcodeDetector.Builder(this).build()
cameraSource = CameraSource.Builder(this, barcodeDetector)
               .setAutoFocusEnabled(true)
               .setRequestedPreviewSize(1600, 1024)

 // set callback
 barcodeDetector.setProcessor(object: Detector.Processor<Barcode>?) {
     override fun release() {}

     override fun receiveDetections(detections: Detector.Detections<Barcode>?) {
         ・・・
         // parse a detected QR code
         ・・・
     }

 }

＆＃13;

展开侧边栏时缺少背景颜色

1 个答案: