Question

我一直在四处寻找解决此类问题的方法。我一直在创建一个像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 && 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');
   }

Answer 1

正如@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的新设计模式： - ）

使用vue js问题在safari中显示和隐藏div

1 个答案: