Html 将 Font Awesome 图标悬停在图像上方
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27343447/
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
Center a Font Awesome icon over the image on hover
提问by Rune
I'm trying to center a font awesome icon over an image when the mouse is hovering the image. Here's my HTML:
当鼠标悬停在图像上时，我试图将一个字体真棒图标放在图像上。这是我的 HTML：
<div class="profile-img-container">
<img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="img-thumbnail img-circle img-responsive" />
<i class="fa fa-upload fa-5x"></i>
</div>
And my CSS:
还有我的 CSS：
.profile-img-container {
position: relative;
}
.profile-img-container img:hover {
opacity: 0.5;
}
.profile-img-container img:hover + i {
display: block;
z-index: 500;
}
.profile-img-container i {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
However the font awesome icon is somewhy displayed all the way to the left and the icon keeps flickering when I hover the image. Here's my JSFiddle: http://jsfiddle.net/fns8byfj/1/
但是，字体真棒图标为什么一直显示在左侧，并且当我将鼠标悬停在图像上时该图标一直闪烁。这是我的 JSFiddle：http: //jsfiddle.net/fns8byfj/1/
回答by Christina
The usage here is important to consider. This is a trigger, so I would use a link inside here. I would not display:none since IOS will not work on the actions inside this when the state on the selector was display:none or visibility:hidden even if the :hover changes this state. Use opacity and position to "hide it".
这里的用法很重要。这是一个触发器，所以我会在这里使用一个链接。我不会显示：无，由于IOS在显示选择器上的状态时，IOS无法在此内部的操作中运行：无或可见性：即使：悬停：鼠标也会更改此状态即使 使用不透明度和位置来“隐藏它”。
VERY IMPORTANT:
很重要：
A parent is not the size of the child image inside it unless that div is the child of something that constrains its width or the div is floated or inline-block. If you put this in a column inside the grid and the image is, at any viewport width, as wide as that column, then you can remove the "inline-block" on the .profile-img-container however if you use it just stand alone you have to float it or put an .inline-block on it but then you have to change the responsiveness of the image if the parent is an inline-block max-width:100% doesn't work (just like it doesn't work if inside a table-cell).
父级不是其中的子图像的大小，除非该 div 是限制其宽度的事物的子级，或者 div 是浮动的或内联块。如果您将它放在网格内的一列中，并且图像在任何视口宽度下都与该列一样宽，那么您可以删除 .profile-img-container 上的“内联块”，但是如果您只使用它独立你必须浮动它或在它上面放一个 .inline-block 但是如果父级是 inline-block max-width:100% 不起作用（就像它不起作用一样），你必须改变图像的响应能力如果在表格单元格内则不起作用）。
:hover is not a good idea, I would use jQuery to make this a click by toggling the parent's class.
:hover 不是一个好主意，我会使用 jQuery 通过切换父类来点击它。
DEMO: http://jsfiddle.net/prtkqb44/
演示：http: //jsfiddle.net/prtkqb44/
CSS:
CSS：
.profile-img-container {
position: relative;
display: inline-block; /* added */
overflow: hidden; /* added */
}
.profile-img-container img {width:100%;} /* remove if using in grid system */
.profile-img-container img:hover {
opacity: 0.5
}
.profile-img-container:hover a {
opacity: 1; /* added */
top: 0; /* added */
z-index: 500;
}
/* added */
.profile-img-container:hover a span {
top: 50%;
position: absolute;
left: 0;
right: 0;
transform: translateY(-50%);
}
/* added */
.profile-img-container a {
display: block;
position: absolute;
top: -100%;
opacity: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
color: inherit;
}
HTML:
HTML：
<div class="profile-img-container">
<img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="img-thumbnail img-circle img-responsive" />
<a href="#"><span class="fa fa-upload fa-5x"></span></a>
</div>
回答by Raul Rene
You can center it both horizontally and vertically using percentage widths, but this implies that you know approximately the width in percentages of the element you are trying to position, in this case the font-awesome one. Note that I aligned it approximately, positioning it to the left and top by 45%.
您可以使用百分比宽度将其水平和垂直居中，但这意味着您大约知道要定位的元素的宽度百分比，在这种情况下，字体很棒。请注意，我将其大致对齐，将其定位到左侧和顶部 45%。
I've updated your code with the above-mentioned part, and by also applying the hover effect on the containing DIV such that the font-awesome icon does not flicker. It flickered because when you were hovering over it, the hover over the image was being lost.
我已经使用上述部分更新了您的代码，并且还在包含的 DIV 上应用了悬停效果，这样字体很棒的图标就不会闪烁。它闪烁是因为当你将鼠标悬停在它上面时，图像上的悬停会丢失。
The HTML remains, the same, only the style differs:
HTML 保持不变，只是样式不同：
.profile-img-container {
position: relative;
}
.profile-img-container i {
position: absolute;
top: 45%;
left: 45%;
transform: translate(-45%, -45%);
display: none;
}
.profile-img-container:hover img {
opacity: 0.5;
}
.profile-img-container:hover i {
display: block;
z-index: 500;
}
Your updated JSFiddle.
您更新的JSFiddle。
回答by Alberto T
Here a fixed version of the @Christinasolution: http://jsfiddle.net/prtkqb44/354/
这是@Christina解决方案的固定版本：http: //jsfiddle.net/prtkqb44/354/
I have removed this one that was not working properly
我已经删除了这个无法正常工作的
.profile-img-container img:hover {
opacity: 0.5
}
and added into .profile-img-container
并添加到.profile-img-container
background: rgba(255, 255, 255, .5);
回答by abl
The following solution should work, as long as you can afford to have fixed widths in the topmost container (in the example, 300px) or otherwise manage to have a line-heightvalue which is always equal to the rendered height of the image.
只要您能负担得起在最顶层容器中的固定宽度（在示例中为 300 像素）或以其他方式设法具有line-height始终等于图像渲染高度的值，以下解决方案应该有效。
The solution exploits the line-heightand text-alignproperties to achieve vertical and horizontal positioning, respectively.
该解决方案利用line-height和text-align属性分别实现垂直和水平定位。
<div class="profile-img-container">
<img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="img-thumbnail img-circle img-responsive" />
<div class="profile-img-i-container">
<i class="fa fa-upload fa-5x"></i>
</div>
</div>
.profile-img-container {
height: 300px;
width: 300px;
line-height: 300px;
position:relative;
}
.profile-img-container:hover img {
opacity: 0.5;
}
.profile-img-container:not(:hover) .profile-img-i-container {
display: none;
}
.profile-img-i-container {
position: absolute;
top: 0px;
left: 0px;
display: block;
height: 100%;
width: 100%;
z-index: 500;
text-align:center;
}
.profile-img-i-container i {
display:block;
line-height: inherit;
}
About the flickering:
关于闪烁：
Be careful with :hover. In your example you had the following snippet:
小心:hover. 在您的示例中，您有以下代码段：
.profile-img-container img:hover + i {
display: block;
...
}
This causes the ielement to appear when you hover the image. Then the ielement is placed on top of the image, so you're not longer hovering the image, but the ielement. The icon hides again, and you are again hovering the image. This is what caused the flickering effect. The solution is to work with the :hoverproperty of the topmost element.
这会导致i元素在您悬停图像时出现。然后将i元素放置在图像的顶部，因此您不再悬停在图像上，而是悬停在i元素上。图标再次隐藏，您再次悬停在图像上。这就是造成闪烁效果的原因。解决方案是使用:hover最顶层元素的属性。
.profile-img-container:hover img + i {
display: block;
...
}
回答by null
I have changed the position of .profile-img-container to absolute and set it's width to 50% (you can adjust the width to change the image size).
我已将 .profile-img-container 的位置更改为绝对并将其宽度设置为 50%（您可以调整宽度以更改图像大小）。
.profile-img-container {
position: absolute;
width:50%;
}
because of the flickering effect, you must set your img z-index higher than the z-index of i.
由于闪烁效果，您必须将 img z-index 设置为高于 i 的 z-index。
.profile-img-container img:hover {
opacity: 0.5;
z-index: 501;
}
.profile-img-container img:hover + i {
display: block;
z-index: 500;
}
I have changed the position of i to absolute and centered it using margin-left and margin-top
我已将 i 的位置更改为绝对位置并使用 margin-left 和 margin-top 将其居中
.profile-img-container i {
display: none;
position: absolute;
margin-left:43%;
margin-top:40%;
}
And finally I changed the position of img to absolute
最后我将 img 的位置更改为绝对
.profile-img-container img {
position:absolute;
}
Try this code: http://jsfiddle.net/fns8byfj/16/
试试这个代码：http: //jsfiddle.net/fns8byfj/16/
