Блог

Я бродил вокруг, чтобы найти исправление такого рода проблемы. Я создавал всплывающую подсказку, подобную div, которая переключается при вводе мыши и выходе мыши. Он работает, как и ожидалось, в большинстве новейших браузеров, но не работает в safari. Он показывает скрытый div при вводе мышью, но он не скрывается при отпускании мыши.

Примечание: Показывать дочерний div только при наведении курсора мыши на родительский.

 <div class="tooltipParent">
    <span class="hoverMe" rel="tooltip" @mouseover="mouseOver($event)" @mouseLeave="mouseLeave($event)">
       <h5>{{ title }}</h5>
    <span @mouseover="mouseOver($event)" @mouseLeave="mouseLeave($event)" class="money" v-if="user amp;amp; condition > 0">{{ condition | currency}}</span>
    <span @mouseover="mouseOver($event)" @mouseLeave="mouseLeave($event)" class="money" v-else>$0.00</span>
    </span>

    <div class="bubble hide">
      <h1>Hello world</h1>
    </div>
</div>
  

Скрипт:

 methods : {

   mouseOver(e){
       var $this =  $(e.target);
       var $parent = $this.parents('.tooltipParent').find('.bubble').removeClass('hide');
   },

   mouseLeave(e){
       $('.bubble').addClass('hide');
   }
  

Как упоминал @ceejayoz в комментариях, вы должны позволить Vue.js обработайте привязки к классу и стилю. Также не следует широко смешивать jQuery и Vue.

В этом конкретном случае вам не нужно много кода, классов или привязок. Вот кое-что, что работает (также в Safari):

 <div>
    <span @mouseover="displayHelloWorld=true" @mouseLeave="displayHelloWorld=false">
       <h5>Your title</h5>
    </span>

    <div class="bubble" v-show="displayHelloWorld">
        <h1>Hello world</h1>
    </div>
</div>
  

и ваш экземпляр Vue (здесь методы не нужны!):

 new Vue({
    el: '#app',
    data: function() {
        return {
            displayHelloWorld: false
        }
    }
})
  

Прекратите использовать jQuery, и вы откроете для себя новые шаблоны проектирования с помощью Vue.js 🙂