Remove q-focus-helper class fro q-item?

  • I’m creating my own style for router q-list q-item and there’s this overlay on hover that keeps bugging me.
    I’ve examined the css and its the class .q-focus-helper that does it.
    For the life of me, I cannot find a way to override that class nor how to disable it.

    Anybody can help with that?

  • Can you provide a context (your code)?

  • overlay seem to come from q-hoverable, remove that then override q-focus-helper.

  • Removing the q-hoverable class does the trick!
    What would be a recommended way of removing the class from code? On mounted with javascript classList.remove?

  • @codebreaker yeah i’ve been trying to override it with css, but no luck. yes you can do it with js class selector.

  • @metalsadman Great. Thank you!

  • @metalsadman now there’s a new problem.

    With the code bellow, it works initially, but when one q-item is clicked and then the second one is clicked, the first one gets its q-hoverable class back.
    Is the only option to remove the class on every route change?

      <q-item :ref="$" :to="{name: link}" active-class="activeLink">
        <q-item-section v-if="icon" avatar>
          <q-icon :name="$ == link ? icon : icon+'-outline'" />
          <q-item-label>{{ title }}</q-item-label>
    export default {
      name: "EssentialLink",
      props: {
        title: {
          type: String,
          required: true
        link: {
          type: String,
          default: "#"
        icon: {
          type: String,
          default: ""
      mounted() {
    <style lang="sass" scoped>
    .menu-list .q-item
      border-bottom-right-radius: 60px
      border-top-right-radius: 60px
      margin-right: 20px
      color: $grey-7
        color: $grey-10
    .menu-list .activeLink
      background-color: $primary
      margin-right: 20px
      color: $grey-1
      z-index: 1
      background-image: linear-gradient(to right, $primary 30%,  scale-color($primary, $lightness: 20%) 100%)
        position: absolute
        content: ""
        top: 0
        right: 0
        bottom: 0
        left: 0
        z-index: -1
        border-bottom-right-radius: 60px
        border-top-right-radius: 60px
        transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)
        opacity: 0
        background-image: linear-gradient(to left, $primary 30%,  scale-color($primary, $lightness: 20%) 100%)
        color: $grey-1
          opacity: 1

  • So I examined the source-code and it’s in the /ui/src/components/item/QItem.js file where the class is set. And as can be seen, I can set manual-focus and that gives me control of the focus state.

    This solves the problem.

    Best regards!

Log in to reply