当我将鼠标悬停在class=“show”表示的清除列表项上时，我试图填充列表项。在html和脚本部分添加checklistItems之前，它正在工作，这是为了解决表单未提交的问题所需要的。表单提交了，但现在我无法将鼠标悬停在透明液体文本上以填充列表项信息。我不确定我取消了这个功能。

<form action="/action_page.php">

<div class="todo-section">
        <input type="checkbox" id="todo7" name="todo7" v-model="checklistItems[6].checked" :value="checklistItems[6].name">
        <label for="todo7" class="checked">You may have <span class="show" style="color:#0000ff; font-weight:bold;">clear liquids</span> <b>UP UNTIL 4 HOURS</b> to scheduled surgery time.</label>
         <ul class="liquid-list">
                <h4>ACCEPTABLE - CLEAR LIQUIDS</h4>
                  <p>1. Water, plain or flavored; Standard or sparkling</p>
                  <p>2. Drinks made from powdered drink mixes (such as Kool Aid or Crystal Light)</p>
                  <p>3. Fruit juices (apple or grape)</p>
                  <p>4. Lemonade no pulp</p>
                  <p>5. Carbonated beverages</p>
                  <p>6. Sports drinks</p>
                  <p>7. Tea or coffee WITHOUT creamer (No non-dairy creamer substitutes)</p>
              </ul>
      </div>
</form>

<script>
export default {
  name: "CheckList",

  data() {
    return {
      checklistItems: [
        {
          checked: false,
          name: "Clear Liquids",
        },  
      ],
    }; 
  },
 computed: {
    allCheckboxesAreChecked() {
      return this.checklistItems.every((item) => item.checked);
    },
  },
};
</script>

<style>
.show {
  position: relative;
  cursor: pointer;
  border-bottom: 2px dotted;
}

.liquid-list{
  position: absolute;
  left: 40%;
  bottom: 17%;
  transform: translateX(-50%);
  background-color: #000;
  color: #fff;
  border-radius: 20px;
  visibility: hidden;
  }

.liquid-list::before {
  content: "";
  position: absolute;
  left: 40%;
  top: 100%;
  border: 15px solid;
  border-color:  #000 #0000 #0000 #0000;
}

.show:hover .liquid-list {
  visibility: visible;
}
</style>

我希望使用用途：hover来显示弹出文本信息。我也在不同的类上尝试了它，看看选择器是否真的工作。