改变色块悬停和点击（并保持活跃）

我有以下代码：改变色块悬停和点击（并保持活跃）

如何编辑我的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

改变色块悬停和点击（并保持活跃）

回答

相关问题