1

我正在尝试将悬停状态应用于某些投资组合导航。它是图像顶部水平和垂直居中的标题。定心可以按我的需要进行（它之所以如此复杂是有原因的，或者相信我，我会以其他方式进行）。

但是悬停状态给我带来了问题。我正在尝试做这样的事情：http: //jsfiddle.net/kmjRu/33/。h2这是图像悬停时及其背景的过渡。我几乎可以通过调整不透明度或 z-index 来使其工作h2，但尤其是背景颜色的更改不起作用（因为没有元素完全覆盖图像，我可以更改其背景）。有谁知道如何让悬停状态正常工作？

这是我拥有的代码，我正在尝试让这种悬停效果起作用：

（也张贴在这里：http: //jsfiddle.net/kmjRu/34/）

HTML

<article>
    <div class="img-crop">
        <h2>Title</h2>
        <a href="#"><img src="http://bit.ly/gUKbAE" /></a>
    </div>
</article>

CSS

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

article {
    overflow: hidden;
}

.img-crop {
    display: inline-block;
    position: relative;
    overflow: hidden;
    max-width: 100%;
}

h2 {
    margin: 0;
    padding: 0;
    z-index: 1;
    line-height: 0;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    text-align: center;
}
4

3 回答 3

0 
h2 {
    margin: 0;
    padding: 0;
    z-index: 1;
    line-height: 0;
    position: absolute;
    display: block;
    top: 50%;
    left: 0;
    width: 100%;
    text-align: center;
    opacity: 0;

    transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
}

h2:hover {
    opacity: 1;
}

这可能是它！

于 2013-04-09T14:36:38.333 回答
0

基本上，您需要确保以下事项。

  1. 你的 h2 应该完全等于后面的容器，只有这样它才会执行完全覆盖。
  2. 将默认值设置opacity为h20。并将其更改/转换为某个中间值，例如 0.6 hover。
  3. 现在，您还需要将 background-colorh2 设置为黑色，或者与父容器不同，然后它才会出现。
  4. 然后给 h2 元素适当的填充，使文本出现在中间。

设置h2如下：

h2 {
    margin: 0;
    z-index: 1;
    padding-top:20%;
    line-height: 0;
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%;
    text-align: center;
    vertical-align:middle;
    height:100%;

    opacity:0;
}

并设置你h2:hover这样：

h2:hover
{
    padding-top:20%;
    color:white;
    background-color:Black;
    opacity:0.6;
    -webkit-transition: opacity 0.25s, background-color 0.25s;
    -o-transition: opacity 0.25s, background-color 0.25s;
    -moz-transition: opacity 0.25s, background-color 0.25s;
    -ms-transition: opacity 0.25s, background-color 0.25s;
    -kthtml-transition: opacity 0.25s, background-color 0.25s;
    transition: opacity 0.25s, background-color 0.25s;
}

看到这个小提琴

于 2013-04-09T14:43:52.773 回答
0

所以，我通过这样做解决了这个问题：

HTML

<article>
    <div class="item">
        <a href="#" class="title"><h2>Title</h2></a>
        <img src="http://placehold.it/350x150" />
    </div>
</article>

CSS

article {
    overflow: hidden;
}

h2 {
    font-weight: normal;
    z-index: 2;
    line-height: 0;
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    left: 0;
    margin: 0;
    padding: 0;
    color: rgba(255,255,255,0);
    -webkit-transition: color 0.2s linear;  
    -moz-transition: color 0.2s linear;  
    -o-transition: color 0.2s linear;  
    transition: color 0.2s linear; 
}

.title {
    display: inline-block;
    position: absolute;
    overflow: hidden;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0);
    text-decoration: none;
    -webkit-transition: background-color 0.2s linear;  
    -moz-transition: background-color 0.2s linear;  
    -o-transition: background-color 0.2s linear;  
    transition: background-color 0.2s linear; 
}

.title:hover {
    text-decoration: none;
}

.item {
    display: inline-block;
    position: relative;
    max-width: 100%;
}

.item:hover .title {
    background: rgba(0,0,0,0.6);
}

.item:hover h2 {
    color: rgba(255,255,255,1);
}

img {
    border: 0;
    vertical-align: top;
    max-width: 100%;
}

看到这个小提琴。这样它是动态的（图像是流动的，没有固定的高度或宽度）并且标题自动垂直和水平居中。

于 2013-04-26T14:29:11.840 回答