悬停效果淡入问题答案

【问题标题】：Trouble with fade in on hover effect悬停效果淡入问题
【发布时间】：2014-07-28 19:47:18
【问题描述】：

我正在尝试创建一个简单的悬停时淡入效果。

默认情况下，带有文本的黑条应该是不可见的，并且一旦将鼠标悬停在图像上就会慢慢淡入。

我已经搜索并尝试了几种不同的方法，但还没有完全奏效。

其中一种方法是this one，它非常简单，应该可以工作，但由于某种原因它没有...

任何帮助将不胜感激。谢谢。

这是我目前的情况：

HTML：

<div id="panel4" class="panels" style="cursor: move; z-index: 48">
<div class="title"><span>&nbsp;TITLE | THIS IS THE TITLE</span></div>
<div id="picture4"><img src="http://i.imgur.com/fbEGCcY.png"></div>
<div class="footer"><span>FOOTER | THIS IS THE FOOTER&nbsp;</span></div>
</div>

CSS：

.panels {
position: absolute;
}

#panel4 {
position: relative;
display: inline-block;
}

#picture4 {
width: 480px;
height: 360px;
}

.title {
width: 100%;
height: 20px;
color: #fff;
background: #000;
font-family: Monaco;
font-size: 10px;
font-weight: normal;
text-align: left;
line-height: 20px;
position: absolute;
}

.footer {
width: 100%;
height: 20px;
color: #fff;
background: #000;
font-family: Monaco;
font-size: 10px;
font-weight: normal;
text-align: right;
line-height: 20px;
bottom: 0;
position: absolute;
}

span {
vertical-align: middle;
display: inline-block;
line-height: normal;
}

JSFiddle

【问题讨论】：

在这种情况下，JavaScript 不是必需的。

标签： jquery html css fade onhover

【解决方案1】：

这样的事情应该可以工作：

http://jsfiddle.net/8D25H/5/

<script>
$(function(){
    $("#picture4").hover(function(){
$(this).parent().children(".title, .footer").fadeToggle(800);
});
});
</script>

【讨论】：

它确实有效，但有一个小故障。当您将鼠标悬停在黑条上时，它会不断淡入“n”……这不应该发生，图像在黑条后面，所以它们应该一直保持不变。您知道为什么会发生这种情况以及如何解决吗？谢谢。

【解决方案2】：

这是一个 CSS 解决方案：http://jsfiddle.net/Mr853/。我还清理了你的一些代码。

HTML：

<div class = "container">
    <header>TITLE | THIS IS THE TITLE</header>
    <footer>FOOTER | THIS IS THE FOOTER</footer>
</div>

CSS：

*, :before, :after {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    padding: 10px;
}

.container {
    position: relative;
    width: 480px;
    height: 360px;
    background: url(http://i.imgur.com/fbEGCcY.png)
                no-repeat;
                100%;
    cursor: pointer;
}

.container > header, 
.container > footer {
    font: normal 10px/2 Monaco, Sans-Serif;
    background-color: #000;
    color: #fff;
    padding-left: 5px;
    position: absolute;
    top: 0;
    width: 100%;
    opacity: 0;
    -webkit-transition: opacity 0.5s linear;
    transition: opacity 0.5s linear;

}

.container > footer {
    top: auto;
    bottom: 0;
    text-align: right;
    padding-right: 5px;
}

.container:hover > header,
.container:hover > footer {
    opacity: 1;
}

【讨论】：