只是第一個(gè)出現(xiàn)了變化，有顏色有三角形，但是后面4個(gè)無論怎么點(diǎn)都沒變化即使是移到上面也毫無變化，怎么回事？.st-container input:checked + a,.st-container input:checked:hover + a{ background-color: #821134; /*設(shè)置被選中了顏色恒定不變*/}.st-container input:checked + a:after{ content:""; width:0; height:0; overflow: hidden; border: 20px solid transparent; border-bottom-color: #821134; position:absolute; bottom: 100%; left:50%; margin-left: -20px; /*使三角形居中的方法*/ /*溫習(xí)下:after的用法*/}.st-container input:hover + a{ background: #AD244F; /*鼠標(biāo)滑過的背景顏色發(fā)生變化*/}
3 回答
stone310
TA貢獻(xiàn)361條經(jīng)驗(yàn) 獲得超191個(gè)贊
試了下代碼能出
<!DOCTYPE?html>
<html>
<head>
????<title></title>
????<meta?charset="UTF-8">
????<style>
????????.st-container?{
????????????height:?100px;
????????????width:?200px;
????????????position:?relative;
????????}
????????.st-container?input:checked?+?a,
????????.st-container?input:checked:hover?+?a?{
????????????background-color:?#821134;
????????????/*設(shè)置被選中了顏色恒定不變*/
????????}
????????.st-container?input:checked?+?a:after?{
????????????content:?"";
????????????width:?0;
????????????height:?0;
????????????overflow:?hidden;
????????????border:?20px?solid?transparent;
????????????border-bottom-color:?#821134;
????????????position:?absolute;
????????????bottom:?100%;
????????????left:?50%;
????????????margin-left:?-20px;
????????????/*使三角形居中的方法*/
????????????/*溫習(xí)下:after的用法*/
????????}
????????.st-container?input:hover?+?a?{
????????????background:?#AD244F;
????????????/*鼠標(biāo)滑過的背景顏色發(fā)生變化*/
????????}
????</style>
</head>
<body>
<div?class="st-container">
????<input?type="checkbox"/>
????<a>sdfasdfsdf</a>
</div>
<div?class="st-container">
????<input?type="checkbox"/>
????<a>sdfasdfsdf</a>
</div>
<div?class="st-container">
????<input?type="checkbox"/>
????<a>sdfasdfsdf</a>
</div>
<div?class="st-container">
????<input?type="checkbox"/>
????<a>sdfasdfsdf</a>
</div>
</body>
</html>
- 3 回答
- 0 關(guān)注
- 2143 瀏覽
添加回答
舉報(bào)
0/150
提交
取消