Hover style on q-circular-progress

[Evertvdw]

Hello,

I’m just starting with the framework and it works pretty well Lot of things work easily and out of the box but I have now encountered something that I can’t quite figure out. I want to use a q-circular-progress component as a router link, so I want to apply some styles to it on hover to make it obvious that you can click on it.

I can’t get any styles to apply on hover, I saw that a svg with a circle is used to draw the component but I had no luck trying to target those with css.

Here is what I tried:

<style lang="stylus">
.q-circular-progress
  margin: .5rem

  &:hover
    cursor: pointer

  &:hover > &__circle
    fill: red !important
</style>

Which does not work. If I add the &__circle under the main class it does change the color of the inner circle.

What is the way to apply styles to this component on hovering?

Thanks!

[s.molinari]

Taking a step back, what’s the purpose of making something that is telling the user to wait an actionable component?

Or asked differently, what is the use case you are trying to achieve?

Scott

[Evertvdw]

That is not the only purpose of this component, I use it to display a value. I have an overview page on which I want to use this component to display a certain value and click on it to get more details on that value.

[s.molinari]

I think you want the knob component. Circular progress is for showing … progress.

https://v1.quasar-framework.org/vue-components/knob#Introduction

Scott

[Evertvdw]

No, that is an input component where you can change some value. I only want to show a value. But on the Knob component there is also no hover style, so I would have to add that manually.

I want to know if it is possible to apply custom hover styles on a q-circular-progress component and how. If it is not, I’ll see if I can use some other component.

[s.molinari]

Hmm… ok. Yeah. the Knob doesn’t fit.

How about just putting QCircularProgress inside a button?

https://codepen.io/smolinari/pen/BEpaOE

Scott

[Evertvdw]

@s-molinari

Yes that would be a workable solution, thanks!