只是第一個出現了變化，有顏色有三角形，但是后面4個無論怎么點都沒變化即使是移到上面也毫無變化，怎么回事？.st-container input:checked + a,.st-container input:checked:hover + a{ background-color: #821134; /*設置被選中了顏色恒定不變*/}.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; /*使三角形居中的方法*/ /*溫習下:after的用法*/}.st-container input:hover + a{ background: #AD244F; /*鼠標滑過的背景顏色發生變化*/}
3 回答
stone310
TA貢獻361條經驗 獲得超191個贊
試了下代碼能出
<!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;
????????????/*設置被選中了顏色恒定不變*/
????????}
????????.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;
????????????/*使三角形居中的方法*/
????????????/*溫習下:after的用法*/
????????}
????????.st-container?input:hover?+?a?{
????????????background:?#AD244F;
????????????/*鼠標滑過的背景顏色發生變化*/
????????}
????</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 關注
- 2162 瀏覽
添加回答
舉報
0/150
提交
取消