国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

jokester / 1541人閱讀

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

題外話

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

從后面開始，文章中的代碼演示會用Codepen來替代。

這樣做的好處有

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

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

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

Start

前面已經(jīng)介紹了兩種純css實現(xiàn)打星星效果的方式，接下來繼續(xù)擴(kuò)展更多的功能，看著更接近平時說見到的效果，我們?nèi)匀粫猿钟胏ss來實現(xiàn)

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

我們這里說的文字變化不是說那個title效果，我們在淘寶上會見到當(dāng)我們滑動鼠標(biāo)在不同的星星上時，右邊會有一個文字，分別提示類似于 滿意，非常滿意，一般， 這樣的提示效果，現(xiàn)在我們就來實現(xiàn)這樣的效果。

先看效果

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

結(jié)構(gòu)

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

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

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

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

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

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

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

現(xiàn)在我們再來添加一點(diǎn)css來生成內(nèi)容

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

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

全部寫完整就是

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

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

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

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

.star{
   position:relative;/*添加相對定位，因為生成的內(nèi)容要相對于最外層了*/
}
.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)前選項

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

這里有個問題，label和input的順序反過來了，這里我們對調(diào)一下，所以之前的代碼需要修復(fù)一下

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

.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
}

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

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

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

小節(jié)

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/116881.html

相關(guān)文章

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

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

    warnerwu 評論0 收藏0

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

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

    afishhhhh 評論0 收藏0

  • 前端國際化的另類方式

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

    FullStackDeveloper 評論0 收藏0

  • 前端國際化的另類方式

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

    everfight 評論0 收藏0

  • 前端國際化的另類方式

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

    blastz 評論0 收藏0

發(fā)表評論

0條評論

jokester

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<