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

資訊專欄INFORMATION COLUMN

用純css實現打星星效果（三）

jokester / 1550人閱讀

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

題外話

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

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

這樣做的好處有

方便自己對所寫過的demo進行統一的管理

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

方便轉載到其他平臺。由于markdown語法中的html內嵌并不是一個標準語法，因而把內嵌大量html的markdown復制到其他平臺，比如segmentfault，就會出現亂碼的問題

Start

前面已經介紹了兩種純css實現打星星效果的方式，接下來繼續擴展更多的功能，看著更接近平時說見到的效果，我們仍然會堅持用css來實現

如何實現鼠標滑動時有文字提示？

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

先看效果

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

結構

html結構還是引用上一篇的:
一點思路

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

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

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

span:after{content:"我是生成的內容"}

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

修改一下結構

現在我們再來添加一點css來生成內容

.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:"很好"
}
.star-item[title="完美"]:hover~.star-tip:after{
   contnet:"完美"
}

這樣應該可以實現鼠標移動到哪就提示相應的文字，但是，不覺得這樣寫法有點太不智能了嗎，完全就是復制粘貼，如果有Less或者Sass可以簡單寫一個循環就可以自動生成這些了，但是本質還是一樣的，寫了這么多重復的代碼，也沒法合并，難道css就沒辦法了嗎？

其實還是有的，我們要用到content的attr功能，就是取到相應屬性的值，有點變量的意思，比如

這樣span就會根據自身的a屬性來生成內容了

我們現在把之前添加的去掉，不可能再根據他那生成了，我們現在需要根據label自身來生成內容，添加如下css

.star{
   position:relative;/*添加相對定位，因為生成的內容要相對于最外層了*/
}
.star-item:after{/*加點樣式*/
   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)
}

這樣還不夠，我們還需要根據:checked記住當前選項

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

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

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

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

注意里面的層級覆蓋關系，可以多試一下。

下面奉獻完整代碼
codepen效果

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

小節

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/116881.html

相關文章

  • 突破css選擇器的局限，實現一個css地址選擇器?

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

    warnerwu 評論0 收藏0

  • 突破css選擇器的局限，實現一個css地址選擇器?

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

    afishhhhh 評論0 收藏0

  • 前端國際化的另類方式

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

    FullStackDeveloper 評論0 收藏0

  • 前端國際化的另類方式

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

    everfight 評論0 收藏0

  • 前端國際化的另類方式

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

    blastz 評論0 收藏0

發表評論

0條評論

jokester

男|高級講師

TA的文章

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