第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

當(dāng)我將鼠標(biāo)懸停在 img 標(biāo)簽下以顯示他下方的文本時(shí)如何制作動(dòng)畫(huà)

當(dāng)我將鼠標(biāo)懸停在 img 標(biāo)簽下以顯示他下方的文本時(shí)如何制作動(dòng)畫(huà)

翻閱古今 2023-10-24 15:24:42
當(dāng)我將鼠標(biāo)懸停在 img 標(biāo)簽下方以顯示文本時(shí),我需要制作動(dòng)畫(huà)(必須是緩慢地顯示文本的動(dòng)畫(huà)),但這還不是全部。它還必須在文本顯示時(shí)向下移動(dòng)其他內(nèi)容,并在文本消失時(shí)返回(何時(shí)不是)徘徊)。非常重要的是,顯示的文本必須是動(dòng)畫(huà)的并且可以返回。我不在乎它是否適用于 jq 或 css 或兩者都只需要工作。我是一個(gè)初學(xué)者,所以也許顯然我只是沒(méi)有看到它。HTML:    <div class="first-block"></div>    <div class="secend-block">        <div class="box">            <img src="/Test/beach.jpg" alt="beach" width="200px" height="200px">            <p>asdasdasssssssssssssssssssssss                asdddddddddddddddddddddd                asdaaaadsssssssssssadsadsdasd                adsssssssssssssssssadsadsadsa            </p>        </div>    </div>    <div class="third-block">        <h1>some content</h1>        <h1>some content</h1>        <h1>some content</h1>        <h1>some content</h1>    </div>CSS: .first-block{    width: 99%;    height: 100px;    background: #f10000;}.secend-block{    width: 99%;    height: auto;    background: #ffffff;}.secend-block .box{    width: 200px;    padding-top: 10px;    margin: 0px auto;}.secend-block .box p{    display: none;}.third-block{    width: 99%;    height: auto;    background: #4400ff;}
查看完整描述

1 回答

?
肥皂起泡泡

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超6個(gè)贊

使用.class:hover


基本上,當(dāng).image懸停時(shí),我們想要更改 的樣式.text。CSS 查詢.image:hover + .text選擇該.text元素,該元素之前有一個(gè)圖像懸停在該元素之前。


.image {

  width: 250px;

}


.text {

  max-height: 0px;

  overflow: hidden;

  

  transition: max-height 1s;

}


.image:hover + .text {

  max-height: 32px;

}

<div class="wrapper">

  <img class="image" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" />

  <p class="text">This is some text</p>

</div>


<div class="wrapper">

  <img class="image" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" />

  <p class="text">This is some text</p>

</div>


查看完整回答
反對(duì) 回復(fù) 2023-10-24
  • 1 回答
  • 0 關(guān)注
  • 117 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)