javascript - 将鼠标悬停在上下文菜单的 li 元素上时，如何更改它的颜色

Question

我正在使用 VueJS 和 Bootstrap 开发应用程序。我使用名为 vue-context Vue Context Menu 的 npm 模块开发了一个上下文菜单

因此，当鼠标悬停在上下文菜单上的某个元素上时，该选项会像这样以蓝色突出显示:

代码如下所示:

<vue-context ref="menu">
    <ul style="font-family: 'Source Sans Pro'; font-size: 15px; font-weight: normal; font-style: normal; text-decoration: none; text-align: left; ">
        <li class="context-menu-item" @click="onClick($event.target.innerText)"><i class='fa fa-file' id="context-menu-icon"></i><span class="context-menu-span">Preview</span></li>
        <li class="context-menu-item" @click="onClick($event.target.innerText)"><i class="fa fa-share-alt" id="context-menu-icon"></i><span class="context-menu-span">Share</span></li>
        <li class="context-menu-item" @click="onClick($event.target.innerText)"><i class="fa fa-copy" id="context-menu-icon"></i><span class="context-menu-span">Copy/Move</span></li>
        <li class="context-menu-item" @click="onClick($event.target.innerText)"><i class='far fa-star' id="context-menu-icon"></i><span class="context-menu-span">Add to Starred</span></li>
        <li class="context-menu-item" @click="onClick($event.target.innerText)"><i class='fas fa-cloud-download-alt' id="context-menu-icon"></i><span class="context-menu-span">Download</span></li>
        <li class="context-menu-item" @click="onClick($event.target.innerText)"><i class='fas fa-pencil-alt' id="context-menu-icon"></i><span class="context-menu-span">Rename</span></li>
        <li class="context-menu-item" @click="onClick($event.target.innerText)"><i class='fas fa-tag' id="context-menu-icon"></i><span class="context-menu-span">Tags</span></li>
        <li class="context-menu-item" @click="onClick($event.target.innerText)"><i class="far fa-trash-alt" id="context-menu-icon"></i><span class="context-menu-span">Delete</span></li>
        <li class="context-menu-item" @click="onClick($event.target.innerText)"><i class="far fa-chart-bar" id="context-menu-icon"></i><span class="context-menu-span">Access Stats</span></li>
    </ul>
</vue-context>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

我希望能够在将鼠标悬停在元素上时将颜色更改为不同的颜色。有人可以帮帮我吗？

Answer 1

您只需要为 .context-menu-item 类添加一个 css 规则:

new Vue({
  components: {
    VueContext
  },
  el: '#app',
  methods: {
    onClick(text) {
      console.log(test)
    }
  }
})

.context-menu-item:hover {
  background-color: green !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-context@3.4.0/dist/vue-context.min.js"></script>

<div id="app">
  <div>
    <p @contextmenu.prevent="$refs.menu.open">
      Right click on me
    </p>
  </div>
  <vue-context ref="menu">
    <ul style="font-family: 'Source Sans Pro'; font-size: 15px; font-weight: normal; font-style: normal; text-decoration: none; text-align: left; ">
      <li class="context-menu-item" @click="onClick($event.target.innerText)"><i class='fa fa-file' id="context-menu-icon"></i><span class="context-menu-span">Preview</span></li>
      <li class="context-menu-item" @click="onClick($event.target.innerText)"><i class="fa fa-share-alt" id="context-menu-icon"></i><span class="context-menu-span">Share</span></li>
      <li class="context-menu-item" @click="onClick($event.target.innerText)"><i class="fa fa-copy" id="context-menu-icon"></i><span class="context-menu-span">Copy/Move</span></li>
      <li class="context-menu-item" @click="onClick($event.target.innerText)"><i class='far fa-star' id="context-menu-icon"></i><span class="context-menu-span">Add to Starred</span></li>
      <li class="context-menu-item" @click="onClick($event.target.innerText)"><i class='fas fa-cloud-download-alt' id="context-menu-icon"></i><span class="context-menu-span">Download</span></li>
      <li class="context-menu-item" @click="onClick($event.target.innerText)"><i class='fas fa-pencil-alt' id="context-menu-icon"></i><span class="context-menu-span">Rename</span></li>
      <li class="context-menu-item" @click="onClick($event.target.innerText)"><i class='fas fa-tag' id="context-menu-icon"></i><span class="context-menu-span">Tags</span></li>
      <li class="context-menu-item" @click="onClick($event.target.innerText)"><i class="far fa-trash-alt" id="context-menu-icon"></i><span class="context-menu-span">Delete</span></li>
      <li class="context-menu-item" @click="onClick($event.target.innerText)"><i class="far fa-chart-bar" id="context-menu-icon"></i><span class="context-menu-span">Access Stats</span></li>
    </ul>
  </vue-context>
</div>