仅在悬停时显示按钮

Question

我已经四处阅读并尝试了其他解决方案来解决我的问题，但似乎都没有用。

我有 3 张图片，每张图片都在自己的 4 列 div 中。我有一个 css 过渡设置，以便当用户的鼠标悬停在图像上时，这些图像从灰度逐渐变为彩色。我现在需要一个按钮在悬停时出现。我附上了一张图片来说明我的意思。

这是中间 4 列的 HTML 和 CSS 片段。

-------------------- HTML ——————–

 <div class="small-4 columns">
    <img src="/wp-content/themes/adamslaw/assets/img/woman.png">
    <a class="button" href="/jane/">View Jane's Profile</a>
</div>

-------------------- CSS ——————–

 .greyish {
background: $smoke !important;
h1 {
    margin: rem-calc(100) 0 0;
}
img {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}

img:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
  .button:hover {
    display: inline-block;
    }
  }
}

注意： 我使用的是 SCSS，因此使用了看起来很奇怪的嵌套 CSS 规则。

原文由 E.Owen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

干得好：

 .button {
    display: none;
}

img:hover + .button, .button:hover {
    display: inline-block;
}

通过这样做，我们使用相邻的同级 css 选择器 + 。选择器非常简单：在“悬停”图像上，您选择 .button （它的兄弟）并显示它。在这里，我添加了 .button:hover 以便当用户“悬停”按钮时，它会保持可见（防止用户将鼠标移到按钮上时出现闪烁效果）。

原文由 H4ris 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用一个简单的 img:hover + .button 选择链接（ + 选择下一个元素，如果它匹配 .button 选择器）4—

 .button {
  display: none;
}
img:hover + .button {
  display: inline-block;
}

 <div class="small-4 columns">
  <img src="http://placehold.it/350x150">
  <a class="button" href="/jane/">View Jane's Profile</a>
</div>

或者，如果按钮不在图像上方，您可以在包装元素上使用 :hover ，这避免了当您想要单击按钮时图像不再悬停的问题（按钮会消失您尝试单击它，如上例所示）

 .button {
  display: none;
}
.wrapper:hover img {
  /* Change the filter in here */
}
.wrapper:hover .button {
  display: inline-block;
}

 <div class="small-4 columns">
  <div class="wrapper">
    <img src="http://placehold.it/350x150">
    <a class="button" href="/jane/">View Jane's Profile</a>
  </div>
</div>

原文由 DBS 发布，翻译遵循 CC BY-SA 3.0 许可协议