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?

    <template>
      <q-item :ref="$route.name" :to="{name: link}" active-class="activeLink">
        <q-item-section v-if="icon" avatar>
          <q-icon :name="$route.name == link ? icon : icon+'-outline'" />
        </q-item-section>
        <q-item-section>
          <q-item-label>{{ title }}</q-item-label>
        </q-item-section>
      </q-item>
    </template>
    
    <script>
    export default {
      name: "EssentialLink",
      props: {
        title: {
          type: String,
          required: true
        },
    
        link: {
          type: String,
          default: "#"
        },
    
        icon: {
          type: String,
          default: ""
        }
      },
      mounted() {
        console.log("mounted");
        console.log(this.$refs[this.$route.name]);
        this.$refs[this.$route.name].$el.classList.remove("q-hoverable");
      }
    };
    </script>
    
    <style lang="sass" scoped>
    .menu-list .q-item
      border-bottom-right-radius: 60px
      border-top-right-radius: 60px
      margin-right: 20px
      color: $grey-7
    
      &:hover
        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%)
    
      &::before
        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%)
    
      &:hover
        color: $grey-1
        &::before
          opacity: 1
    </style>
    


  • 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