Question

按下按钮时如何更改文字？如果我按下价格按钮，将显示文字：＆＃34;添加到购物篮＆＃34;。

这是代码：

＆＃13;

body {
  font-family: 'Roboto', sans-serif; 
}
.price {
  font-size: 1em;
  border-radius: 50px;
  background-color: #f00;
  text-align: center;
  color: #fff;
  padding: 5px;
  width: 10%;
  margin: 20px auto;
}
.price:hover {
  background-color: #fff;
  border: 1px solid #bfbfbf;
  color: #f00;
  cursor: pointer;
}
.info {
  display: none;
}

＆＃13;

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"/>
<div class="price">$50</div>
<div class="info">Add to basket</div>

＆＃13;

如何解决这个问题？

Answer 1

当鼠标点击价格时，您可以使用:active来显示文字：

.price {
    font-size: 1em;
    border-radius: 50px;
    background-color: #f00;
    text-align: center;
    color: #fff;
    padding: 5px;
    width: 10%;
    margin: 20px auto;
}
.price:hover {
    background-color: #fff;
    border: 1px solid #bfbfbf;
    color: #f00;
    cursor: pointer;
}
.info {
    display: none;
}

.price:active + .info {
    display: block;
 }

<div class="price">$50</div>
<div class="info">Add to basket</div>

如果您尝试在:hover上显示文字，就像问题的标题所说的那样:hover如此：

.price {
    font-size: 1em;
    border-radius: 50px;
    background-color: #f00;
    text-align: center;
    color: #fff;
    padding: 5px;
    width: 10%;
    margin: 20px auto;
}
.price:hover {
    background-color: #fff;
    border: 1px solid #bfbfbf;
    color: #f00;
    cursor: pointer;
}
.info {
    display: none;
}

.price:hover + .info {
    display: block;
 }

<div class="price">$50</div>
<div class="info">Add to basket</div>

更新3：

.price {
    font-size: 1em;
    border-radius: 50px;
    background-color: #f00;
    text-align: center;
    color: #fff;
    padding: 5px;
    width: 10%;
    margin: 20px auto;
}
.price:hover {
    background-color: #fff;
    border: 1px solid #bfbfbf;
    color: #f00;
    cursor: pointer;
}
.info,
.price:hover .amount {
    display: none;
}

.price:hover .info {
    display: block;
 }

<div class="price">
  <div class="amount">$50</div>
  <div class="info">Add to basket</div>
</div>

Answer 2

您的问题不清楚您真正希望实现的目标，但如果您只是想将div内的文字显示在info类，只要将鼠标悬停在价格按钮上，然后添加

.price:hover + .info {
    display: block; 
}

你的css将完成这项工作。

提示：建议使用内部CSS 不。您应该将所有CSS编码在单独的文件中。

Answer 3

您可以使用包装器div来捕获它，如果您将来更改html，我认为更易于维护：

body {
  font-family: 'Roboto', sans-serif; 
}
.price {
  font-size: 1em;
  border-radius: 50px;
  background-color: #f00;
  text-align: center;
  color: #fff;
  padding: 5px;
  width: 10%;
  margin: 20px auto;
}
.price:hover {
  background-color: #fff;
  border: 1px solid #bfbfbf;
  color: #f00;
  cursor: pointer;
}
.info {
  display: none;
  width: 20%;
  margin: 20px auto;
  cursor: pointer;
}
.wrapper:hover .info {
  display: block;
}

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"/>
<div class="wrapper">
  <div class="price">$50</div>
  <div class="info">Add to basket</div>
</div>

更改文字悬停

3 个答案: