Question

在这里写一个jsbin https://jsbin.com/famuyodeye/2/edit?html,output

  <style>
    .grid-container {
        display: grid;
        grid:100%/1fr 1fr;
        grid-gap: 10px;
        margin: 10px;
    }

    .grid-item {
        overflow: hidden;
        width: 100%; 
    }
    img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    }
</style>


<div class="grid-container" style="height:400px;">
    <div class="grid-item">
        <img src="./a.jpg">
    </div>
    <div class="grid-item">
        <img src="./b.jpg">
    </div>
</div>

假设我放置了一个简单的2列网格并将2张图像放入其中

我想添加一个交互式的鼠标悬停，当鼠标悬停在空白区域时，会显示一个分隔线按钮，稍后我可以添加一些拖动功能来调整网格宽度。

我也许可以通过很多JS来实现，但是有没有一种聪明的方法，我的意思是最好只使用css来使用更少的js来实现这一目标？

Answer 1

是的，您可以仅使用CSS来完成此操作，也请查看此工作代码框：-code for drag bar to show on hover

修改后的代码：Edited code

  <style>
    .grid-container {
      color: white;
        display: grid;
        grid:100%/1fr 1fr;
        /* grid-gap: 10px; */
        margin: 10px;
/*       position: relative; */
    }

    .grid-item {
        position: relative;
        color: white;
        overflow: hidden;
        width: calc(100% + 10px);
        /* margin-right: 10px; */
        /* padding-right: 10px; */
    }
    .drag-bar{
      /* width: 200px; */
      position: absolute;
      left: 0;
      top:50%;
      width: 20px;
      height: 50px;
      z-index: 9999999;
      visibility: hidden;
    }
    .hover-bar{
      color: blue;
      position: absolute;
      right:0;
      top:0%;
      z-index: 9999999;
      height: 400px;
      width:8px;
      border: 1px solid blue;
    }
    .hover-bar:hover > .drag-bar{
      opacity: 1;
      visibility: visible;
      border: 2px solid blue;
    }
    img{
      width: calc(100% - 20px);
      height: 100%;
      object-fit: cover;
    }
</style>  

<div class="grid-container" style="height:400px;">
    <div class="grid-item">
        <img src="data:image/png;base64,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">
        <div class="hover-bar"><div class="drag-bar" ><img style="width:100%;" src="data:image/jpeg;base64,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"></div></div>
    </div>

    <div class="grid-item">
        <img src="data:image/png;base64,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">
    </div>
</div>

如何在网格的列间隙区域内绘制分隔线

1 个答案: