首页 文章

淡入淡出效果的麻烦

提问于
浏览 次
0

我正在尝试创建一个简单的 fade in on hover 效果 .

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

我已经搜索并尝试了一些不同的方法，但尚未完成它的工作 .

其中一种方法是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

jquery html css fade onhover

2 回答

  • 0

    这样的事情应该有效：

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

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

    这是一个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;
}
    回复于

相关问题