html – 仅在悬停时显示按钮

概述我已经阅读并尝试了其他解决方案来解决我的问题,但似乎都没有. 我有3张图片,每张图片都在他们自己的4列div中.我设置了css过渡,以便当用户的鼠标悬停在图像上时,这些图像从灰度渐变为彩色.我现在需要在悬停时出现一个按钮.我附上了一张图片来说明我的意思. 这里是我的HTML和CSS的中间4列的片段. ——————— HTML ——————— <div class="small-4 columns" 我已经阅读并尝试了其他解决方案来解决我的问题,但似乎都没有.

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

这里是我的HTML和CSS的中间4列的片段.

——————— HTML ———————

<div >    <img src="/wp-content/themes/adamslaw/assets/img/woman.png">    <a  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 – 仅在悬停时显示按钮全部内容，希望文章能够帮你解决html – 仅在悬停时显示按钮所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。