TA貢獻(xiàn)29條經(jīng)驗(yàn) 獲得超13個(gè)贊
stone310的答案非常好，
說白了，這個(gè)效果就是用css中的 :hover來實(shí)現(xiàn)的，當(dāng)然慕課網(wǎng)還用了過渡使變化更順暢。
:hover 的作用就是當(dāng)鼠標(biāo)經(jīng)過時(shí)，元素發(fā)生的變化， 這里是作用在子元素上。
TA貢獻(xiàn)361條經(jīng)驗(yàn) 獲得超191個(gè)贊
<!DOCTYPE>
<html>
<head>
????<meta?charset="utf-8"/>
????<style>
????????#box?{
????????????width:200px;
????????????height:200px;
????????????margin:?300px;
????????}
????????#div1?{
????????????width:?100%;
????????????height:?80%;
????????????background:?red;
????????????position:?relative;
????????????overflow:?hidden;
????????}
????????#price{
????????????width:100%;
????????????height:20%;
????????????position:relative;
????????????background:blue;
????????????color:?white;
????????}
????????#div2?{
????????????width:?100%;
????????????height:?100%;
????????????background:?black;
????????????opacity:?0.7;
????????????position:?absolute;
????????????top:?70%;
????????????transition:?all?0.5s?ease;
????????????color:?white;
????????}
????????#box:hover?#div2?{
????????????top:20px;
????????????opacity:0.7;
????????}
????</style>
</head>
<body>
<div?id="box">
????<div?id="div1">
????????<div?id="div2">
????????????<h2>HELLO!</h2>
????????????<p>文章正文文章正文文章正文文章正文文章正文文章正文文章正文文章正文文章正文</p>
????????</div>
????</div>
????<div?id="price">$128.00</div>
</div>
</body>
</html>舉報(bào)