Q-card "on-hover"

mboeni

Hey there

I would like to add a “hover” effect when having the mouse over a q-card. how do I achieve that?

The idea is to show to the user which q-cards can be clicked (opening a link in an external browser).

Cheers,
Michael

PS: Being able to do it on a q-img would actually be sufficient…

metalsadman

@mboeni add a class on your card with :hover selector.

.my-card:hover
  background-color: yellow

mboeni

@metalsadman Thanks for the tip.

I found a way which kinda also works for me:

            <div v-if="infoBlock.channelUrl !== '' ">
                <q-card-section class="q-ma-xs infoBlock">
                <q-img
                  :src='infoBlock.image'
                  basic
                  @click='imgClicked(infoBlock.channelUrl)'
                >
                </q-img>
                </q-card-section>
              </div>
              <div v-else>
                <q-card-section class="q-ma-xs" >
                <q-img
                  :src='infoBlock.image'
                  basic
                  @click='imgClicked(infoBlock.channelUrl)'
                >
                </q-img>
                </q-card-section>
              </div>

and this on the scss side:

.infoBlock {
    background-color:(var(--q-color-primary))
}
.infoBlock:hover {
  background-color:(var(--q-color-accent))
}

Although I don’t like the duplicated code…

I’ll give @mouseover a shot too.

Cheers,
Michael

PS: This is the result:

mboeni

@metalsadman yep, that’s what I did…see code below

metalsadman

@mboeni you can do it like this

.infoBlock {
    background-color:(var(--q-color-primary))
    &:hover {
      background-color:(var(--q-color-accent))
    }
}

// or with sass
.infoBlock
  background-color:(var(--q-color-primary))
  &:hover
    background-color:(var(--q-color-accent))

mboeni

@metalsadman Interesting…although this gives me a different effect:

Now the image is included in the highlighting…:o

metalsadman

@mboeni it shouldn’t unless you set the class on your image itself. https://codepen.io/metalsadman/pen/PoPQMWY

mboeni

The code still does this:

             <div v-if="infoBlock.channelUrl !== '' ">
                <q-card-section class="q-ma-xs infoBlock">
                <q-img
                  :src='infoBlock.image'
                  basic
                  @click='imgClicked(infoBlock.channelUrl)'
                >
                </q-img>
                </q-card-section>
              </div>
              <div v-else>
                <q-card-section class="q-ma-xs" >
                <q-img
                  :src='infoBlock.image'
                  basic
                  @click='imgClicked(infoBlock.channelUrl)'
                >
                </q-img>
                </q-card-section>
              </div>

I’m doing it on the card section that wraps the image…

metalsadman

@mboeni same result see update https://codepen.io/metalsadman/pen/PoPQMWY.

reks

@metalsadman I reviewed your code,
instead of changing background color, how to change “image src” on hover

metalsadman

@reks bind your img src to a data property that you change with on mousehover event handler.

No More Posting New Topics!

Q-card "on-hover"