改變色塊懸停和點擊（並保持活躍）

我有以下代碼：改變色塊懸停和點擊（並保持活躍）

如何編輯我的CSS在這樣一種方式，.pricing客戶的背景將變爲一個color:#333和所有我的段落樣式將更改爲另一個color:#fff當我徘徊.pricing-customer塊。因爲現在如果我將鼠標懸停在塊上，它只會改變背景，而段落樣式只會在我將鼠標懸停在段落上時發生變化。我怎樣才能使.pricing-customer的顏色和所有我的段落在點擊時改變？（爲相同的顏色爲上懸停）

.pricing-customer { 
 
    background: #fff; 
 
    min-height: 250px; 
 
    cursor: pointer; 
 
    transition: all .3s ease-in-out; 
 
    margin-bottom: 20px; 
 
    padding: 10px 0px 25px 0px; 
 
} 
 
p.pricing-number { 
 
    font-size: 52px; 
 
    margin-bottom: 10px; 
 
    margin-top: 20px; 
 
    color: #fead0d; 
 
} 
 
p.pricing-monthes { 
 
    color: #5e6977; 
 
    font-size: 14px; 
 
    line-height: 21px; 
 
    padding-bottom: 20px; 
 
    border-bottom: 1px solid #e1e8ee; 
 
} 
 
p.emails { 
 
    color: #444; 
 
    font-size: 16px; 
 
    line-height: 21px; 
 
}

<div class="pricing-customer col-sm-12 col-sm-3 text-center"> 
 
    <h3><?php echo $t_title; ?></h3> 
 
    <p class="pricing-number">$ 70</p> 
 
    <br> 
 
    <p class="pricing-monthes">per week/month</p> 
 
    <p class="pricing-emails">100 000 emails</p> 
 
</div>

預先感謝您

來源

2016-11-18 Morgari

請檢查此鏈接：-https：//css-tricks.com/almanac/selectors/a/active/ –

只是用僞選擇:hover

$('.pricing-customer').on('click', function(){ 
 
    $(this).toggleClass('active'); 
 
    $(this).children().toggleClass('active'); 
 
});

.pricing-customer { 
 
    background: #fff; 
 
    min-height: 250px; 
 
    cursor: pointer; 
 
    transition: all .3s ease-in-out; 
 
    margin-bottom: 20px; 
 
    padding: 10px 0px 25px 0px; 
 
} 
 
p.pricing-number { 
 
    font-size: 52px; 
 
    margin-bottom: 10px; 
 
    margin-top: 20px; 
 
    color: #fead0d; 
 
} 
 
p.pricing-monthes { 
 
    color: #5e6977; 
 
    font-size: 14px; 
 
    line-height: 21px; 
 
    padding-bottom: 20px; 
 
    border-bottom: 1px solid #e1e8ee; 
 
} 
 
p.emails { 
 
    color: #444; 
 
    font-size: 16px; 
 
    line-height: 21px; 
 
} 
 
.pricing-customer:hover, .pricing-customer.active { 
 

 
background-color: #333; 
 
} 
 
.pricing-customer:hover p , .pricing-customer p.active{ 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="pricing-customer col-sm-12 col-sm-3 text-center"> 
 
    <h3><?php echo $t_title; ?></h3> 
 
    <p class="pricing-number">$ 70</p> 
 
    <br> 
 
    <p class="pricing-monthes">per week/month</p> 
 
    <p class="pricing-emails">100 000 emails</p> 
 
</div>

來源

2016-11-18 05:39:21

感謝您的留言。請更仔細地閱讀問題。」因爲現在我如果將鼠標懸停，它只會更改背景和段落樣式僅在我將鼠標懸停在段落時發生變化。我該如何製作.pricing-customer的顏色，並且我的所有段落在點擊時都會改變？（與懸停時的顏色相同）「 – Morgari

@Morgari iive編輯了我的答案，檢查了它，我使用jquery實現了點擊功能並修改了css。 –

@ ron-basco哇對我很好！我可以通過第二次點擊刪除活動嗎？預先感謝 – Morgari

要做到這一點，你將需要添加一小段代碼，這將觸發對pricing-customeractive類div元素。

<html> 
    <head> 
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script> 
    <style type="text/css"> 
     .pricing-customer { 
     background: #fff; 
     min-height: 250px; 
     cursor: pointer; 
     transition: all .3s ease-in-out; 
     margin-bottom: 20px; 
     padding: 10px 0px 25px 0px; 
     } 
     p.pricing-number { 
     font-size: 52px; 
     margin-bottom: 10px; 
     margin-top: 20px; 
     color: #fead0d; 
     } 
     p.pricing-monthes { 
     color: #5e6977; 
     font-size: 14px; 
     line-height: 21px; 
     padding-bottom: 20px; 
     border-bottom: 1px solid #e1e8ee; 
     } 
     p.emails { 
     color: #444; 
     font-size: 16px; 
     line-height: 21px; 
     } 
     .pricing-customer:hover { 
     background-color: #333; 
     } 
     .pricing-customer:hover p { 
     color: #fff; 
     } 
     .pricing-customer.active, 
     .pricing-customer.active p { 
     background-color: #333; 
     color: #fff; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="pricing-customer col-sm-12 col-sm-3 text-center"> 
     <h3><?php echo $t_title; ?></h3> 
     <p class="pricing-number">$ 70</p> 
     <br> 
     <p class="pricing-monthes">per week/month</p> 
     <p class="pricing-emails">100 000 emails</p> 
    </div> 
    <script> 
     $('.pricing-customer').on('click', function(){ 
     $(this).toggleClass('active'); 
     }); 
    </script> 
    </body> 
</html>

來源

2016-11-18 05:37:04 Yogesh

請閱讀問題多一點用心「因爲現在我如果我將鼠標懸停在塊上，它只會改變背景，而段落樣式只會在我將鼠標懸停在段落上時發生變化。我該如何製作.pricing-customer的顏色，並且我的所有段落在點擊時都會改變？（與懸停時的顏色相同）「 – Morgari

我已更新ans，請檢查 – Yogesh

.pricing-customer { 
 
    background: #fff; 
 
    min-height: 250px; 
 
    cursor: pointer; 
 
    transition: all .3s ease-in-out; 
 
    margin-bottom: 20px; 
 
    padding: 10px 0px 25px 0px; 
 
} 
 
.pricing-customer:hover{ 
 
    background: #333; 
 
} 
 
p.pricing-number:hover,p.pricing-monthes:hover,p.pricing-emails:hover{ 
 
    color: #fff; 
 
} 
 
p.pricing-number { 
 
    font-size: 52px; 
 
    margin-bottom: 10px; 
 
    margin-top: 20px; 
 
    color: #fead0d; 
 
} 
 
p.pricing-monthes { 
 
    color: #5e6977; 
 
    font-size: 14px; 
 
    line-height: 21px; 
 
    padding-bottom: 20px; 
 
    border-bottom: 1px solid #e1e8ee; 
 
} 
 
p.emails { 
 
    color: #444; 
 
    font-size: 16px; 
 
    line-height: 21px; 
 
}

<div class="pricing-customer col-sm-12 col-sm-3 text-center"> 
 
    <h3><?php echo $t_title; ?></h3> 
 
    <p class="pricing-number">$ 70</p> 
 
    <br> 
 
    <p class="pricing-monthes">per week/month</p> 
 
    <p class="pricing-emails">100 000 emails</p> 
 
</div>

來源

2016-11-18 05:41:12

試試：

html:active { 
 
    background: yellow; 
 
}

<h2>click anywhere</h2>

來源

2016-11-18 05:55:36

改變色塊懸停和點擊（並保持活躍）

回答

相關問題