Question

请参阅下面的代码段。

当offsetx和offsety为20或更高时，它看起来很好。然而，当我尝试将它们设置为5，这似乎与我完美排列时，有一个重要的＆＃34;闪烁＆＃34;。我有什么可以做的吗？

＆＃13;

$(document).ready(function(){
		offsetx = 5;
    offsety = 5;
  $('#oy').html("offsety=" + offsety);
  $('#ox').html("offsetx=" + offsetx);
    $('#area1').mouseout(function(){
        $('#c1').hide();
        return false;
    }).mouseenter(function(){
        $('#c1').show();
        return false;
    }).mousemove(function(e){
        $('#c1').css('left', e.clientX - offsetx).css('top', e.clientY - offsety);
    });
});

$('#toggle').on('click',function() {
	if ($('#toggle').html() == 'Exact') {
  	$('#toggle').html('Offset');
    offsetx = 5;
    offsety = 5;
	} else {
  	$('#toggle').html('Exact');
    offsetx = 25;
    offsety = 15;
	}
  $('#oy').html("offsety=" + offsety);
  $('#ox').html("offsetx=" + offsetx);
})

＆＃13;

#area1 {
	height: 50px;
	border: 3px dashed #CCCCCC;
	background: #FFFFFF;
	padding: 20px;
	cursor: none;
}

#toggle { cursor: pointer; padding: 3px; border: 1px solid black; margin-top: 10px;}
#c1 {
	cursor: none;
	width: 12px;
	height: 12px;
	position: absolute;
	display: none;
	top: 0;
	left: 0;
	z-index: 10000;
	background: #000;
	border-radius: 50%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="c1"></div>    
<div id="area1"></div>
<br>
<span id="toggle">Offset</span><span><- Click to toggle</span>
<br><br>
<div id="oy"></div>
<div id="ox">

</div>

＆＃13;

Answer 1

尝试添加

  import Vue from 'vue'
  import AppView from './components/App.vue'

  console.log('Play outside of vue')
  var audio = new Audio('file.mp3')
  audio.play()

  new Vue({
    el: '#root',
    mounted () {
       console.log('Will it play here?? lol')
       var audio = new Audio('file.mp3')
       audio.play()
    }, 
    render: h => h(AppView)
  })

到＃c1的CSS规则。

Haven没试过，但它可以解决你的问题。我不确定所有浏览器是否支持指针事件。

Answer 2

您需要进行两项更改。首先将您的活动从mouseout更改为mouseleave，然后重新构建HTML，使#c1位于#area内。

基本上发生的事情是#c1元素位于#area元素之外，因此当鼠标显示在鼠标下时，鼠标已“移出”#area元素。因此它隐藏了它，你得到了奇怪的闪烁行为。

更新了小提琴：

https://jsfiddle.net/etjs7gLL/2/

自定义css光标在特定位置时闪烁？

2 个答案: