亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

用純css實(shí)現(xiàn)打星星效果（三）

jokester / 1718人閱讀

摘要：題外話查看原文可以有更好的排版效果哦從后面開(kāi)始，文章中的代碼演示會(huì)用來(lái)替代。

題外話

查看原文可以有更好的排版效果哦

從后面開(kāi)始，文章中的代碼演示會(huì)用Codepen來(lái)替代。

這樣做的好處有

方便自己對(duì)所寫過(guò)的demo進(jìn)行統(tǒng)一的管理

方便文章中的展示，前面都是直接在文章中嵌入html代碼和css樣式，這樣就會(huì)造成css樣式名的沖突，前面的解決方式就是不斷的重新命名 star、star01、star02等等這些

方便轉(zhuǎn)載到其他平臺(tái)。由于markdown語(yǔ)法中的html內(nèi)嵌并不是一個(gè)標(biāo)準(zhǔn)語(yǔ)法，因而把內(nèi)嵌大量html的markdown復(fù)制到其他平臺(tái)，比如segmentfault，就會(huì)出現(xiàn)亂碼的問(wèn)題

Start

前面已經(jīng)介紹了兩種純css實(shí)現(xiàn)打星星效果的方式，接下來(lái)繼續(xù)擴(kuò)展更多的功能，看著更接近平時(shí)說(shuō)見(jiàn)到的效果，我們?nèi)匀粫?huì)堅(jiān)持用css來(lái)實(shí)現(xiàn)

如何實(shí)現(xiàn)鼠標(biāo)滑動(dòng)時(shí)有文字提示？

我們這里說(shuō)的文字變化不是說(shuō)那個(gè)title效果，我們?cè)谔詫毶蠒?huì)見(jiàn)到當(dāng)我們滑動(dòng)鼠標(biāo)在不同的星星上時(shí)，右邊會(huì)有一個(gè)文字，分別提示類似于 滿意，非常滿意，一般， 這樣的提示效果，現(xiàn)在我們就來(lái)實(shí)現(xiàn)這樣的效果。

先看效果

https://codepen.io/xboxyan/pe...

結(jié)構(gòu)

html結(jié)構(gòu)還是引用上一篇的:
一點(diǎn)思路

如果想實(shí)現(xiàn)星星最后面有一行提示文字，按照一般的思路，可能就是在最后一顆星星后面直接添加一個(gè)標(biāo)簽span，然后通過(guò)js監(jiān)聽(tīng)mouseover和mouseout事件來(lái)修改span的innerHTML，只要會(huì)點(diǎn)js的通應(yīng)該能實(shí)現(xiàn)，那么通過(guò)css如何實(shí)現(xiàn)呢？

顯然是不能直接修改innerhtml的，那么該如何修改呢？

我們可以直接用:after偽元素來(lái)生成內(nèi)容，比如

span:after{content:"我是生成的內(nèi)容"}

那么我們就可以通過(guò)偽元素的content來(lái)用css生成內(nèi)容

修改一下結(jié)構(gòu)

現(xiàn)在我們?cè)賮?lái)添加一點(diǎn)css來(lái)生成內(nèi)容

.star-item[title="垃圾"]:hover~.star-tip:after{
   contnet:"垃圾"
}

這樣當(dāng)鼠標(biāo)滑過(guò)第一個(gè)星星的時(shí)候，后面就會(huì)生成垃圾的提示。

全部寫完整就是

.star-item[title="垃圾"]:hover~.star-tip:after{
   contnet:"垃圾"
}
.star-item[title="很差"]:hover~.star-tip:after{
   contnet:"很差"
}
.star-item[title="一般"]:hover~.star-tip:after{
   contnet:"一般"
}
.star-item[title="很好"]:hover~.star-tip:after{
   contnet:"很好"
}
.star-item[title="完美"]:hover~.star-tip:after{
   contnet:"完美"
}

這樣應(yīng)該可以實(shí)現(xiàn)鼠標(biāo)移動(dòng)到哪就提示相應(yīng)的文字，但是，不覺(jué)得這樣寫法有點(diǎn)太不智能了嗎，完全就是復(fù)制粘貼，如果有Less或者Sass可以簡(jiǎn)單寫一個(gè)循環(huán)就可以自動(dòng)生成這些了，但是本質(zhì)還是一樣的，寫了這么多重復(fù)的代碼，也沒(méi)法合并，難道css就沒(méi)辦法了嗎？

其實(shí)還是有的，我們要用到content的attr功能，就是取到相應(yīng)屬性的值，有點(diǎn)變量的意思，比如

這樣span就會(huì)根據(jù)自身的a屬性來(lái)生成內(nèi)容了

我們現(xiàn)在把之前添加的去掉，不可能再根據(jù)他那生成了，我們現(xiàn)在需要根據(jù)label自身來(lái)生成內(nèi)容，添加如下css

.star{
   position:relative;/*添加相對(duì)定位，因?yàn)樯傻膬?nèi)容要相對(duì)于最外層了*/
}
.star-item:after{/*加點(diǎn)樣式*/
   position:absolute;
   width:100px;
   font-size:14px;
   height:20px;
   line-height:20px;
   right:0;
   margin-right:-105px;
   color:#666
}
.star-item:hover:after{
   content:attr(title)
}

這樣還不夠，我們還需要根據(jù):checked記住當(dāng)前選項(xiàng)

input[type="radio"]:checked+.star-item:after{/*選擇input相鄰的下一個(gè)label*/
   content:attr(title)
}

這里有個(gè)問(wèn)題，label和input的順序反過(guò)來(lái)了，這里我們對(duì)調(diào)一下，所以之前的代碼需要修復(fù)一下

這樣也能達(dá)到同樣的效果，選中效果效果也出來(lái)了，但是選中和滑動(dòng)會(huì)有重疊效果，選擇需要在滑動(dòng)時(shí)去掉選中效果，同樣是先清空再添加的思路

.star:hover .star-item:after{
  content:""!important
}

input[type="radio"]:checked+.star-item:after{
   content:attr(title)
}

.star:hover .star-item:hover:after{
   content:attr(title)!important
}

注意里面的層級(jí)覆蓋關(guān)系，可以多試一下。

下面奉獻(xiàn)完整代碼
codepen效果

https://codepen.io/xboxyan/pe...

小節(jié)

通過(guò)一番努力，這個(gè)打星星效果基本上滿足一般的業(yè)務(wù)需求，沒(méi)有用到任何js代碼，完美兼容ie8瀏覽器，應(yīng)該能體現(xiàn)出css的強(qiáng)大之處吧，雖然css現(xiàn)在還比較蹩腳，但是用css的思路來(lái)實(shí)現(xiàn)一個(gè)邏輯還挺有意思的，可以從更多的角度去解決一個(gè)問(wèn)題，有時(shí)反而會(huì)更簡(jiǎn)單

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/116881.html

相關(guān)文章

  • 突破css選擇器的局限，實(shí)現(xiàn)一個(gè)css地址選擇器?

    摘要：后代選擇器，可以選擇子元素，卻沒(méi)法選擇父元素。這里說(shuō)的有關(guān)聯(lián)指的是相近或者相反，比如子選擇器和后代選擇器就是比較相近的如果要實(shí)現(xiàn)鼠標(biāo)相關(guān)的功能，可能就會(huì)聯(lián)想到等選擇器。 首先看一個(gè)效果，注意地址欄的變化 showImg(https://segmentfault.com/img/remote/1460000016937042?w=1058&h=433); 然后思考一下，用css如何實(shí)現(xiàn)？...

    warnerwu 評(píng)論0 收藏0

  • 突破css選擇器的局限，實(shí)現(xiàn)一個(gè)css地址選擇器?

    摘要：后代選擇器，可以選擇子元素，卻沒(méi)法選擇父元素。這里說(shuō)的有關(guān)聯(lián)指的是相近或者相反，比如子選擇器和后代選擇器就是比較相近的如果要實(shí)現(xiàn)鼠標(biāo)相關(guān)的功能，可能就會(huì)聯(lián)想到等選擇器。 首先看一個(gè)效果，注意地址欄的變化 showImg(https://segmentfault.com/img/remote/1460000016937042?w=1058&h=433); 然后思考一下，用css如何實(shí)現(xiàn)？...

    afishhhhh 評(píng)論0 收藏0

  • 前端國(guó)際化的另類方式

    摘要：前不久做了一個(gè)國(guó)際化的項(xiàng)目，基于和，里面用到了國(guó)際化，使用方式也很簡(jiǎn)單然后，頁(yè)面所有的官方組件都變成了中文默認(rèn)是英文。前端配置是指如何根據(jù)需要把需要展示的語(yǔ)言顯示在頁(yè)面，比如在中文環(huán)境下顯示中文，英文環(huán)境下顯示英文，用戶看得到才算數(shù)。 關(guān)于國(guó)際化 一個(gè)項(xiàng)目發(fā)展到一定的環(huán)境或者一開(kāi)始就是為多國(guó)打造的，就需要考慮國(guó)際化了。簡(jiǎn)單來(lái)說(shuō)，就是一套頁(yè)面，多套語(yǔ)言。 前不久做了一個(gè)國(guó)際化的項(xiàng)目，基于...

    FullStackDeveloper 評(píng)論0 收藏0

  • 前端國(guó)際化的另類方式

    摘要：前不久做了一個(gè)國(guó)際化的項(xiàng)目，基于和，里面用到了國(guó)際化，使用方式也很簡(jiǎn)單然后，頁(yè)面所有的官方組件都變成了中文默認(rèn)是英文。前端配置是指如何根據(jù)需要把需要展示的語(yǔ)言顯示在頁(yè)面，比如在中文環(huán)境下顯示中文，英文環(huán)境下顯示英文，用戶看得到才算數(shù)。 關(guān)于國(guó)際化 一個(gè)項(xiàng)目發(fā)展到一定的環(huán)境或者一開(kāi)始就是為多國(guó)打造的，就需要考慮國(guó)際化了。簡(jiǎn)單來(lái)說(shuō)，就是一套頁(yè)面，多套語(yǔ)言。 前不久做了一個(gè)國(guó)際化的項(xiàng)目，基于...

    everfight 評(píng)論0 收藏0

  • 前端國(guó)際化的另類方式

    摘要：前不久做了一個(gè)國(guó)際化的項(xiàng)目，基于和，里面用到了國(guó)際化，使用方式也很簡(jiǎn)單然后，頁(yè)面所有的官方組件都變成了中文默認(rèn)是英文。前端配置是指如何根據(jù)需要把需要展示的語(yǔ)言顯示在頁(yè)面，比如在中文環(huán)境下顯示中文，英文環(huán)境下顯示英文，用戶看得到才算數(shù)。 關(guān)于國(guó)際化 一個(gè)項(xiàng)目發(fā)展到一定的環(huán)境或者一開(kāi)始就是為多國(guó)打造的，就需要考慮國(guó)際化了。簡(jiǎn)單來(lái)說(shuō)，就是一套頁(yè)面，多套語(yǔ)言。 前不久做了一個(gè)國(guó)際化的項(xiàng)目，基于...

    blastz 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

jokester

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<