设置el-button中link类型按钮的文字颜色且不改变悬停样式

可以使用以下样式来设置el-button中link类型按钮的文字颜色：

.el-button--text:not(.is-disabled) {
  color: #xxx; /* 设置文字颜色 */
}

这样可以只改变文字颜色，而不影响悬停样式。其中，`#xxx`是你想要设置的颜色值。请将其替换为你需要的颜色值。

相关问题

el-dropdown有el-dropdown-item时显示button没有不显示button

`el-dropdown` 组件的 `trigger` 属性可以控制下拉菜单的触发方式，当 `trigger` 属性值为 `'click'` 时，会显示一个按钮，当属性值为 `'hover'` 时，不会显示按钮，而是在鼠标悬停在触发元素上时直接展开下拉菜单。

因此，如果你希望 `el-dropdown` 在含有 `el-dropdown-item` 的情况下始终显示按钮，可以将 `trigger` 属性设置为 `'click'`。示例代码如下：

<el-dropdown trigger="click">
  <span class="el-dropdown-link">
    点击触发下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu>
    <el-dropdown-item>菜单项一</el-dropdown-item>
    <el-dropdown-item>菜单项二</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

el-dropdown-item hover效果

### Element UI `el-dropdown-item` 实现 Hover 效果

为了实现 `el-dropdown-item` 的 hover 效果，可以通过自定义 CSS 来调整悬停时的样式。默认情况下，Element UI 组件库中的 dropdown 菜单项会在鼠标悬停时改变背景颜色或其他属性。

#### 自定义 Hover 样式

通过覆盖默认的 CSS 类可以修改悬停效果：

/* 修改 el-dropdown-menu 中项的悬停样式 */
.el-dropdown-menu__item:hover {
    background-color: #f0f0f0 !important;
    color: #ff6700 !important; /* 更改文字颜色 */
}

/* 移除默认焦点轮廓 */
.el-tooltip__trigger:focus {
    outline: none;
}

上述代码片段展示了如何更改 `el-dropdown-item` 在被悬停时的颜色[^1]。如果希望进一步定制交互体验，还可以考虑添加其他视觉反馈，比如增加字体粗细或图标变化等。

对于更复杂的场景，可能需要利用 JavaScript 或 Vue.js 生命周期钩子来动态绑定类名或内联样式，从而响应用户的操作行为。

#### 使用示例

下面给出一个完整的 HTML 和 CSS 结合的例子，展示带有 hover 效应的下拉菜单：

<template>
  <div class="dropdown-container">
    <!-- Dropdown trigger -->
    <el-button type="primary">Hover me</el-button>

    <!-- Dropdown menu with custom styles on items -->
    <el-dropdown placement="bottom-start" @command="handleCommand">
      <span class="el-dropdown-link">
        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="a">黄金糕</el-dropdown-item>
        <el-dropdown-item command="b">狮子头</el-dropdown-item>
        <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
        <el-dropdown-item command="d" divided>双皮奶</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  methods: {
    handleCommand(command) {
      console.log(`click on item ${command}`);
    }
  }
};
</script>

<style scoped>
.dropdown-container .el-dropdown-menu__item:hover {
    background-color: rgba(255, 103, 0, 0.1);
    color: #ff6700;
}
</style>

此模板创建了一个简单的下拉列表，并应用了特定于悬停状态下的样式规则。注意这里还包含了对分隔线的支持以及命令处理函数。