Question

当鼠标悬停在图像上时，我正试图将字体上的字体真棒图标居中。这是我的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>

我的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;
}

然而，字体真棒图标会一直显示在左侧，当我悬停图像时图标会保持闪烁。这是我的JSFiddle： http://jsfiddle.net/fns8byfj/1/

Answer 1

这里的用法很重要。这是一个触发器，所以我会在这里使用一个链接。我不会显示：none，因为当选择器上的状态为display：none或visibility：hidden时，即使：hover更改此状态，IOS也无法处理此内部的操作。使用不透明度和位置来＆＃34;隐藏它＆＃34;。

非常重要：

父元素不是其中子图像的大小，除非div是约束其宽度或div浮动或内联块的东西的子元素。如果将其放在网格内的一列中，并且图像在任何视口宽度上与该列一样宽，那么您可以删除＆＃34;内联块＆＃34;在.profile-img-container上然而如果你只是单独使用它你必须浮动它或在它上放一个.inline-block但是如果父是一个内联块最大你必须改变图像的响应性-width：100％不起作用（就像它在表格单元格内部不起作用一样）。

：悬停不是一个好主意，我会使用jQuery通过切换父类来实现点击。

DEMO：http://jsfiddle.net/prtkqb44/

<强> 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：

<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>

Answer 2

您可以使用百分比宽度水平和垂直居中，但这意味着您大致知道要尝试定位的元素的百分比宽度，在这种情况下是字体非常棒的。 请注意，我将其大致对齐，将其定位在左侧和顶部45％。

我已经使用上述部分更新了您的代码，并且还对包含DIV应用了悬停效果，使得字体真棒图标不会闪烁。它闪烁着，因为当你在它上面盘旋时，悬停在图像上的东西正在丢失。

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;
}

您更新的JSFiddle 。

Answer 3

这是@Christina解决方案的固定版本：http://jsfiddle.net/prtkqb44/354/

我删除了一个无效的

background: rgba(255, 255, 255, .5);

并添加到 .profile-img-container

"HOBBIES[0]

Answer 4

以下解决方案应该可行，只要您能够在最顶层的容器（在示例中为300px）中具有固定宽度，或者设置为具有line-height值，该值始终等于渲染高度图像。

该解决方案利用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;
}

<强> Fiddle

关于闪烁：

小心:hover。在您的示例中，您有以下代码段：

.profile-img-container img:hover + i {
    display: block;
    ...
}

这会导致您悬停图片时显示i元素。然后i元素放置在图像的顶部，因此您不再悬停图像，而是i元素。图标再次隐藏，您再次悬停图像。这是导致闪烁效果的原因。解决方案是使用最顶层元素的:hover属性。

.profile-img-container:hover img + i {
    display: block;
    ...
}

Answer 5

我已将.profile-img-container的位置更改为绝对值，并将其宽度设置为50％（您可以调整宽度以更改图像大小）。

.profile-img-container {
position: absolute;
width:50%;
}

由于闪烁效应，您必须将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的位置更改为绝对值并使用margin-left和margin-top

将其居中

.profile-img-container i {
display: none;
position: absolute;
margin-left:43%;
margin-top:40%;
}

最后我将img的位置改为绝对

.profile-img-container img {
position:absolute;
}

试试此代码：http://jsfiddle.net/fns8byfj/16/

在悬停时将图像上的字体真棒图标居中

5 个答案:

DEMO：http://jsfiddle.net/prtkqb44/

关于闪烁：