CSS实现图片悬浮或点击时展示对应不同文本的问题求助

实现方案 #

调整HTML结构补充对应提示文本元素，同时新增匹配的CSS选择规则即可实现需求，修改后的完整可运行代码如下：

<link rel='stylesheet' href='https://afeld.github.io/emoji-css/emoji.css'>
<style>
        @import url("https://fonts.googleapis.com/css?family=Lato:400,700");
        
        .rating-wrapper {
          max-width: 400px;
          margin: 80px auto;
          background: #fff;
          padding: 1em;
          border-radius: 3px;
          box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
        }
        .rating-wrapper .rating-label {
          text-align: center;
          font-weight: 700;
          display: block;
        }
        .rating-wrapper .ratingItemList {
          max-width: 300px;
          margin: auto;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          padding: 1em 0;
        }
        .rating-wrapper input.rating {
          display: none;
        }
        .rating-wrapper label.rating {
          padding: 5px 3px;
          font-size: 32px;
          opacity: 0.7;
          filter: grayscale(1);
          cursor: pointer;
        }
        .rating-wrapper label.rating:hover {
          filter: grayscale(0.84);
          transform: scale(1.1);
          transition: 100ms ease;
        }
        .rating-wrapper input.rating:checked + label.rating {
          filter: grayscale(0);
          opacity: 1;
          transform: scale(1.1);
        }
        /* 提示文本默认隐藏 */
        .hint {
          display: none;
          color: red;
          width: 100%;
          text-align: center;
          margin-top: 10px;
        }
        /* 悬浮/选中第一个表情时显示Good */
        .rating-4:hover ~ .hint-4,
        .rating-4:checked ~ .hint-4 {
          display: block;
        }
        /* 悬浮/选中第二个表情时显示Great */
        .rating-5:hover ~ .hint-5,
        .rating-5:checked ~ .hint-5 {
          display: block;
        }
</style>

<form class="rating-wrapper">
  <label class="rating-label">How helpful was this?
    <div class="ratingItemList">
      <input class="rating rating-4" id="rating-4-2" type="radio" value="4" name="rating"/>
      <label class="rating rating-4" for="rating-4-2"><i class="em em-grinning"></i></label>
      
      <input class="rating rating-5" id="rating-5-2" type="radio" value="5" name="rating"/>
      <label class="rating rating-5" for="rating-5-2"><i class="em em-star-struck"></i></label>

      <div class="hint hint-4">Good</div>
      <div class="hint hint-5">Great</div>
    </div>
  </label>
</form>

以上代码可实现悬浮对应表情时显示对应文本，点击选中表情后也会持续展示对应文本，两张表情分别匹配“Good”和“Great”的提示内容。

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