課程
/前端開發(fā)
/CSS3
/css3實現(xiàn)網(wǎng)頁平滑過渡效果
為什么火狐瀏覽器的checked沒有用?。窟x了別的按鈕以后再刷新就變成剛剛選的那個按鈕選中了。。
2015-05-24
源自:css3實現(xiàn)網(wǎng)頁平滑過渡效果 1-6
正在回答
我的還是可以的,請看下面
<div id="nav2"> ? ?<input type="radio" name="radio-set" id="r1" checked="checked"> ? ?<a href="#html5">HTML5</a> ? ?<input type="radio" name="radio-set" id="r2"> ? ?<a href="#css3">CSS3</a> ? ?<input type="radio" name="radio-set" id="r3"> ? ?<a href="#js">JavaScript</a> ? ?<input type="radio" name="radio-set" id="r4"> ? ?<a href="#jquery">Jquery</a> ? ?<input type="radio" name="radio-set" id="r5"> ? ?<a href="#ajax">Ajax</a></div>
#nav2 input:checked+a,#nav2 input:checked:hover+a{ ? ?background: burlywood; ? ?/*被選中的單選按鈕后面的a顏色加深*/}#nav2 input:checked + a:after{ ? ?/*為導航添加三角*/ ? ?content: ""; ? ?width: 0px; ? ?height: 0px; ? ?overflow: hidden; ? ?border-top:20px solid burlywood; ? ?border-left:20px solid transparent; ? ?border-right:20px solid transparent; ? ?position: absolute; ? ?top: 90%; ? ?left: 40%;}#nav2 input:hover + a{ ? ?background-color: navajowhite; ? ? /*鼠標滑過變色*/}
舉報
CSS3 打造頁面之間的平滑過渡效果,帶來神奇的體驗
3 回答:checked兼容性
1 回答#st-control-2:checked ~.st-sctoll #st-panel-1 h2{ }選擇不生效
1 回答#st-control-1:checked ~ .st-scroll的選擇是如何實現(xiàn)的
6 回答我發(fā)現(xiàn)?#st-control-1:checked ~ .st-scroll不能選擇到 .st-scroll怎么破?
2 回答data-icon沒有用
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學習伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2016-03-23
我的還是可以的,請看下面
<div id="nav2">
? ?<input type="radio" name="radio-set" id="r1" checked="checked">
? ?<a href="#html5">HTML5</a>
? ?<input type="radio" name="radio-set" id="r2">
? ?<a href="#css3">CSS3</a>
? ?<input type="radio" name="radio-set" id="r3">
? ?<a href="#js">JavaScript</a>
? ?<input type="radio" name="radio-set" id="r4">
? ?<a href="#jquery">Jquery</a>
? ?<input type="radio" name="radio-set" id="r5">
? ?<a href="#ajax">Ajax</a>
</div>
#nav2 input:checked+a,#nav2 input:checked:hover+a{
? ?background: burlywood; ? ?/*被選中的單選按鈕后面的a顏色加深*/
}
#nav2 input:checked + a:after{ ? ?/*為導航添加三角*/
? ?content: "";
? ?width: 0px;
? ?height: 0px;
? ?overflow: hidden;
? ?border-top:20px solid burlywood;
? ?border-left:20px solid transparent;
? ?border-right:20px solid transparent;
? ?position: absolute;
? ?top: 90%;
? ?left: 40%;
}
#nav2 input:hover + a{
? ?background-color: navajowhite; ? ? /*鼠標滑過變色*/
}