Html 仅在悬停时显示按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40891570/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show button on hover only
提问by E.Owen
I've read around and tried other solutions to my problem but none seem to work.
我已经阅读并尝试了其他解决方案来解决我的问题，但似乎都没有。
I have 3 images, each within their own 4-column div. I have a css transition set up so that these images fade from grayscale to colour when the user's mouse hovers over the image. I now need to get a button to appear on hover. I have attached an image to illustrate what I mean.
我有 3 个图像，每个图像都在自己的 4 列 div 中。我设置了一个 css 过渡，以便当用户的鼠标悬停在图像上时，这些图像从灰度渐变为彩色。我现在需要让一个按钮出现在悬停时。我附上了一张图片来说明我的意思。
And here is a snippet of my HTML and CSS for the middle 4 columns.
这是中间 4 列的 HTML 和 CSS 片段。
---------------------HTML---------------------
--------------------- 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---------------------
--------------------- 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;
}
}
}
NOTE:I am using SCSS, hence the strange-looking, nested CSS rules.
注意：我使用的是 SCSS，因此看起来很奇怪，嵌套的 CSS 规则。
回答by H4ris
Here you go:
干得好：
.button {
display: none;
}
img:hover + .button, .button:hover {
display: inline-block;
}
By doing this, we're using the adjacent sibling css selector +. The selector is pretty simple: on image "hovering", you select .button(its sibling) and display it. Here, I added .button:hoverso that when the user "hovers" the button, it keeps it visible (prevent a blinking effect as the user moves the mouse over the button).
通过这样做，我们使用了相邻的同级 css 选择器+。选择器非常简单：在图像“悬停”上，您选择.button（它的兄弟）并显示它。在这里，我添加了.button:hover这样，当用户“悬停”按钮时，它会保持可见（防止用户将鼠标移到按钮上时出现闪烁效果）。
回答by DBS
You could use a simple img:hover + .buttonto select the link (the +selects the next element if it matches the .buttonselector)
您可以使用简单img:hover + .button的选择链接（+如果与.button选择器匹配，则选择下一个元素）
.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>Alternatively if the button isn't over the image, you could use :hoveron a wrapper element, which avoids the problem of the image no longer being hovered when you want to click the button (the button would disappear when you try to click it, as seen in the above example)
或者，如果按钮不在图像上，您可以: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>回答by ArMikael
You can set class to the image container and show the button on hover the image container.
您可以将类设置为图像容器并在悬停图像容器时显示按钮。
Please check this linkwith working example:
请使用工作示例检查此链接：
.img-container:hover .button {
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 20px;
width: 100%;
text-align: center;
}回答by Feelsbadman
here you go my friend:
你去吧，我的朋友：
div.small-4.columns img ~ a {display:none;}
div.small-4.columns img:hover ~ a {display:block;}
UPDATE:
更新：
if you want the button to be clickable and not dissapearuntil you remove the move from the picture, use the following instead:
如果您希望按钮可点击并且在您从图片中删除移动之前不会消失，请改用以下内容：
a.button {display: none;}
div.small-4.columns:hover > a.button {display:block;}
EXPLANATION:
解释：
a.buttonis to select the awith class .buttondiv.small-4.columns:hoverselecting the divthat has both classes .small-4and .columns(parent of image)
a.button是选择awith 类.buttondiv.small-4.columns:hover选择同时div具有类.small-4和.columns（图像的父级）的类
>means childand ~means sibling, in this case div.small-4.columns:hover > a.button {display:block;}we're telling it to display the child element which is a.button, when we hover div.small-4.columns
>手段孩子和~手段同胞，在这种情况下，div.small-4.columns:hover > a.button {display:block;}我们告诉它显示的子元素是a.button，当我们悬停div.small-4.columns
