使用悬停状态切换列表的可见性

Question

当我将鼠标悬停在由 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 来显示弹出的文本信息。我还在不同的类上尝试过，看看选择器是否真的有效。

Answer 1

一种可能的解决方案是设置一个可以切换列表可见性的变量。在要悬停的文本上使用事件

mouseenter

和

mouseleave

可以切换变量，然后根据变量值使用 v-if 或 v-show 有条件地渲染列表（我更喜欢 v-show用于条件悬停文本）

<label for="todo7" class="checked">
  You may have 
  <span 
    style="color:#0000ff; font-weight:bold;"
    @mouseenter="showList = true" 
    @mouseleave="showList = false">
    clear liquids
  </span>
  <b>UP UNTIL 4 HOURS</b> to scheduled surgery time.
</label>
<ul class="liquid-list" v-show="showList">
  ...
</ul>

data() {
  return {
    showList: false,
    ...
  }
}

Vue Playground 示例