Mouseover does not work on q-btn

  • I’m making a small customization of q-btn for my personal use and I need to use the mouseover event, but for some reason it does not work on q-btn, any suggestions?

    ‘border’: border,
    ‘color’: color,
    ‘background-color’: color
    <icon :local.boolean=“true” name=“mah-ambulance”/>

    import css from ‘…/assets/js/cssDefault.js’
    import {
    } from ‘quasar’
    import Icon from ‘./icon.vue’
    export default{
    components: {
    props: {
    big: {
    type: Boolean(),
    required: false,
    default: false
    small: {
    type: Boolean(),
    required: false,
    default: false
    color: {
    type: String(),
    required: true,
    default: css.color.primary
    bgColor: {
    type: String(),
    required: true,
    default: css.color.secondary
    mounted: function () {
    this.border = ($(’.btnWave’).width() / 2) + ‘px ’ + this.bgColor + ’ solid!important’
    data: function () {
    return {
    border: ‘0px ’ + this.bgColor + ’ solid!important’
    methods: {
    teste (event) {
    /* $(‘hover’)
    borderWidth: ‘1px’,
    color: this.bgColor
    }) */

    <style lang=“stylus”>
    @import ‘~src/themes/app.variables.styl’;
    position: relative;
    cursor: default;
    transition: border 0.3s ease, color 0.5s ease ;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

  • solved with jquery, if you have any suggestion with vue send

  • Please format your code (4 spaces before each line), it’s unreadable

  • Does anyone have suggestions on how to get mouseover and mouseout working on q-btn objects? Those events do not get fired at all. I don’t want to include jQuery just to solve this problem.

  • Thanks Razvan Stoenescu, The solution to the problem is to use @mouseover.native

Log in to reply

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.