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

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

如何使用 CSS 和 jQuery 向下展開“閱讀更多...”部分

如何使用 CSS 和 jQuery 向下展開“閱讀更多...”部分

蠱毒傳說(shuō) 2023-12-04 17:20:51
我目前在 html 中有一個(gè)段落標(biāo)簽,里面有長(zhǎng)文本。我還有一個(gè)按鈕,單擊該按鈕后應(yīng)展開和縮回文本部分。使用它是因?yàn)槲谋咎L(zhǎng),所以我添加了一個(gè)“閱讀更多”按鈕來(lái)展開并顯示全文。現(xiàn)在我無(wú)法擴(kuò)展該段落。相反,當(dāng)單擊該按鈕時(shí),它會(huì)淡入背景并且永遠(yuǎn)不會(huì)顯示。超文本標(biāo)記語(yǔ)言  <div class="infos">    <p class="name">Mr Big</p>    <br>    <p class="job">Founder & Co-Owner</p>    <p class="read-more"> Lorem IPsum Lorem IPsumLorem IPsumLorem IPsumLorem IPsumLorem IPsumLorem long text...</p>  </div>  <div class="button_container">     <button class="btn2">       <span>Read more...</span>    </button></div>CSS.infos .read-more{    font-size: 15px;    font-weight: 500;    color: rgb(230, 241, 255);    font-style: italic;    line-height: 1.5;    position: relative;    width: 100%;    text-align: center;    margin: 0 auto; padding: 15px 10px;    overflow: hidden;    max-height: 170px;    /* "transparent" only works here because == rgba(0,0,0,0) */    background-image: linear-gradient(to top, transparent, #434343);}.btn2 {    border: none;    display: block;    text-align: center;    cursor: pointer;    text-transform: uppercase;    outline: none;    overflow: hidden;    position: absolute;    color: #fff;    font-weight: 700;    font-size: 10px;    background-color: #59646c;    padding: 10px 30px;    margin: 0 auto;    box-shadow: 0 5px 15px rgba(0,0,0,0.20);    border-radius: 25px;}.btn2 span {    position: relative;    z-index: 1;}.button_container {    position: relative;    left: 0;    right: 0;    top: 30%;}.description, .link {    text-align: center;}.btn2:after {    content: "";    position: absolute;    left: 0;    top: 0;    height: 490%;    width: 140%;    background: #78c7d2;    -webkit-transition: all .5s ease-in-out;    transition: all .5s ease-in-out;    -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);    transform: translateX(-98%) translateY(-25%) rotate(45deg);}.btn2:hover:after {    -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);    transform: translateX(-9%) translateY(-25%) rotate(45deg);}
查看完整描述

目前暫無(wú)任何回答

  • 0 回答
  • 0 關(guān)注
  • 257 瀏覽

添加回答

舉報(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)