将鼠标悬停在上下文菜单上时如何更改 li 项的颜色
Posted
技术标签:
【中文标题】将鼠标悬停在上下文菜单上时如何更改 li 项的颜色【英文标题】:How to change the color of an li item of the context menu, when hovered over it 【发布时间】:2019-07-19 15:45:38 【问题描述】:我正在使用 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>
我希望将鼠标悬停在某个项目上时能够将颜色更改为不同的颜色。有人可以帮帮我吗?
【问题讨论】:
请添加一个工作代码sn-p。谢谢 它在the demo 中似乎工作得很好。您必须有其他东西覆盖 CSS。 【参考方案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>
【讨论】:
现在工作正常。我意识到我没有包括!重要。谢谢! :)【参考方案2】:您可以查看this question以获取!important
在css中的更多信息。
【讨论】:
以上是关于将鼠标悬停在上下文菜单上时如何更改 li 项的颜色的主要内容,如果未能解决你的问题,请参考以下文章