我已经阅读并尝试了其他解决方案来解决我的问题,但似乎都没有用。
我有 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 规则。
最佳答案
给你:
.button {
display: none;
}
img:hover + .button, .button:hover {
display: inline-block;
}
通过这样做,我们使用相邻的同级 css 选择器 +
。选择器非常简单:在图像“悬停”时,您选择 .button
(它的兄弟)并显示它。在这里,我添加了 .button:hover
,这样当用户“悬停”按钮时,它会保持可见(防止在用户将鼠标移到按钮上时出现闪烁效果)。
关于html - 仅在悬停时显示按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40891570/