Q-card "on-hover"

[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.