1

这是我的问题的 jsfiddle：http: //jsfiddle.net/bkWaw/

我试图在项目覆盖悬停时显示文本，但由于某种原因，不透明度没有改变。我究竟做错了什么？

这是代码

HTML：

<a href="#">
    <div class="item-overlay">
        <div class="item-hover">text</div>
    </div>
    <img src="http://placehold.it/500x300" />
</a>

CSS：

.item a { display: block; color: #666;  font-style: italic; font-weight: bold;}
.item a:hover { text-decoration: none; }
.item-overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: transparent;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.item-overlay:hover { background-color: rgba(233, 115, 149,0.8);}
.item-hover { color: white; z-index: 999; position: absolute; opacity: 0; width: 100px; height: 100px;}

JS：

$('.item-overlay').hover(
function () {
    $(this).find('item-hover').css("opacity","1");
},
function () {
    $(this).find('item-hover').css("opacity","0");
}
);
4

1 回答 1

2

演示

用于.CLASS

$(this).find('.item-hover').css("opacity","1");

PS 在 jsFiddle 你没有设置 jQuery 库，你想要的在纯 CSS 中是可行的，但我想你知道一旦你使用转换......

于 2013-09-03T09:21:15.023 回答