如何使用HTML与CSS实现简单的点击触发评分反馈系统？

解决方案 #

你当前的问题是使用了:hover伪类实现触发，天然就是鼠标悬停生效，要实现点击触发可以选择以下两种方案：

方案1：纯CSS实现（无需写JS） #

修改步骤

1. 修改HTML中两个a标签的href属性，分别指向对应提示的id
2. 移除CSS中原有的hover触发规则，替换为:target伪类规则

完整代码

CSS

.rating {
  background: #0084FF;
  color: #fff;
  padding: 20px;
  width: 60%;
  margin: auto;
  margin-top: 20px;
}

.rating a {
  color: #fff;
}

.thanks {
  display: none;
  background: green;
  color: #fff;
  padding: 20px;
  margin: 0px;
}

.sorry {
  display: none;
  background: red;
  color: #fff;
  padding: 20px;
  margin: 0px;
}

/* 替换原来的hover规则，用target实现点击触发 */
#thanks:target {
  display: block;
}
#sorry:target {
  display: block;
}

HTML

<div class="rating" id="rating">
  Was This Helpful? &nbsp;&nbsp;&nbsp;&nbsp; 
  <a href="#thanks" class="yes" id="yes">Yes</a> &nbsp;&nbsp; 
  <a href="#sorry" class="no" id="no">No</a>

  <div class="thanks" id="thanks">
    Thank You!
  </div>
  <div class="sorry" id="sorry">
    We're sorry to hear that!
  </div>
</div>

方案2：JS实现（灵活度更高，可扩展其他逻辑） #

如果后续需要加统计点击次数、上报数据等逻辑，推荐用JS方案，HTML和原有CSS不变（仅删除hover相关规则），新增JS代码即可：

JS代码

// 获取元素
const yesBtn = document.getElementById('yes');
const noBtn = document.getElementById('no');
const thanksTip = document.getElementById('thanks');
const sorryTip = document.getElementById('sorry');

// Yes点击事件
yesBtn.addEventListener('click', e => {
  e.preventDefault(); // 阻止a标签默认锚点跳转
  sorryTip.style.display = 'none';
  thanksTip.style.display = 'block';
});

// No点击事件
noBtn.addEventListener('click', e => {
  e.preventDefault();
  thanksTip.style.display = 'none';
  sorryTip.style.display = 'block';
});

两种方案都可以实现仅点击触发提示，鼠标悬停无任何反应的需求。

内容的提问来源于stack exchange，提问作者T3C