在悬停时删除 div 的覆盖答案

【问题标题】：Remove an overlay of a div on hover在悬停时删除 div 的覆盖
【发布时间】：2017-11-16 07:17:44
【问题描述】：

我有一个带有背景图像和线性渐变叠加层的 div。当 div 悬停在上面时，我想将线性渐变转换为完全透明。

.board-grid {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.board-focus {
  margin: 10px;
  background: #FFF;
  text-decoration: None;
  border-radius: 10px;
  height:30vh;
  width:25vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.board-name {
  text-transform: uppercase;
  //max-width: 50%;
  color: #FFF;
}

<div class="board-grid">
  <a href=''>
    <div class="board-focus" style="background: linear-gradient(0deg,rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(https://placeimg.com/480/300/any); background-size: cover; background-position: center center; background-repeat: no-repeat;">
      <div class="board-name">
        <p>John Doe</p>
      </div>
    </div>
  </a>
</div>

Fiddle

【问题讨论】：

你不能转换渐变，只能调整它的背景位置/大小......如果我怀疑我们的样式 inline，你甚至不能这样做。跨度>

标签： html css hover linear-gradients

【解决方案1】：

  .board-grid {
        display: flex;
        justify-content: center;
        flex-direction: row;
    }

    .board-focus {
        margin: 10px;
        background: #FFF;
        border-radius: 10px;
        height:30vh;
        width:25vw;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .board-name {
        text-transform: uppercase;
        max-width: 50%;
        color: #FFF;
        z-index: 999;
    }
    .board-focus::after{
        content: ' ' ;
        background: linear-gradient(0deg,rgba(0,0,0,0.5),rgba(0,0,0,0.5));
        position: absolute;
        display: block;
        width:100%;
        top:0;
        left:0;
        height:100%;
        border-radius: 10px;
        z-index: 10;
    }
    .board-focus:hover::after{
        content: ' ';
        display: none;
    }

<div class="board-grid">
    <a href='' style="text-decoration: none">
        <div class="board-focus" style="background-image: url(https://placeimg.com/480/300/any); background-size: cover; background-position: center center; background-repeat: no-repeat;">
            <div class="board-name">
                <p>John Doe</p>
            </div>
        </div>
    </a>
</div>

【讨论】：

【解决方案2】：

你可以使用下面的代码

.board-grid {
  display: flex;
  justify-content: center;
  flex-direction: row;
}
.board-focus {
  margin: 10px;
  background: #FFF;
  text-decoration: None;
  border-radius: 10px;
  height:30vh;
  width:25vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(0deg,rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(https://placeimg.com/480/300/any);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.board-name {
  text-transform: uppercase;
  // max-width: 50%;
  color: #FFF;
  }
  .board-focus:hover
  {
    background-image:url(https://placeimg.com/480/300/any);;
  }

   <div class="board-grid">
  <a href=''><div class="board-focus" style="">
  <div class="board-name">
      <p>John Doe</p>
  </div>
</div></a>
</div>
  </a>
</div>

【讨论】：

不幸的是，因为我使用的是 Django，所以需要将背景声明为内联。在我最初发布之后，这似乎被某人编辑了。
你的项目可以用js或者jquery吗？