Question

我有以下代码：

如何以这样的方式编辑我的CSS .pricing-customer背景将更改为一个color:#333当我将鼠标悬停在{{1}时，我的所有段落样式都会更改为另一个color:#fff阻止。因为现在如果我将鼠标悬停在块上，它只会改变背景，而段落样式只会在我悬停段落本身时发生变化。我怎样才能使.pricing-customer的颜色和我的所有段落都会随着点击而改变？（与悬停时的颜色相同）

＆＃13;

.pricing-customer

＆＃13;

.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;
}

＆＃13;

提前谢谢

Answer 1

要实现这一目标，您需要添加一个小代码段，该代码段将在active div元素上切换pricing-customer类。

<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>

Answer 2

只使用伪选择器:hover

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 3

.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>

Answer 4

试一试：

＆＃13;

html:active {
  background: yellow;   
}

＆＃13;

<h2>click anywhere</h2>

＆＃13;

在悬停和单击时更改块颜色（并保持活动状态）

4 个答案: