gpt4 book ai didi

javascript - 通过离开 Canvas 来突出显示页面?

转载 作者:行者123 更新时间:2023-11-28 12:49:19 25 4
gpt4 key购买 nike

我有一个奇怪的问题,真的不知道如何很好地解释它。当您单击 Canvas 并将其移到 Canvas 边界之外时,它会突然突出显示整个页面并以蓝色突出显示。有没有办法解决这个问题,甚至可以使高光显示为透明的不同颜色?或者一些解决这个问题的代码,甚至是一些 css?

这里是要测试的页面,或者要了解我! http://www.taffatech.com/Paint.html

和代码:

<html>
<head>
<title>Paint</title>

<script type="text/javascript" src="jspaint/jquery-1.9.1.js"></script>
<script type="text/javascript" src="jspaint/jquery-ui-1.10.3.custom.js"></script>

<link rel="Stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/dot-luv/jquery-ui.css" />
<script src="jspaint/Paint.js"></script>

<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>

<style type="text/css">
body {
background:#303030;
}
#canvas, #canvasCursor {
cursor: none;
background: #fff;
position: absolute;
left: 50px;
top: 30px;
z-index: 1;
}
#canvasCursor {
z-index: 20;
background: none;
}

#tabs {

background: #ffffff;
}
</style>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />


</head>

<body style = "background:#303030;">
<br><br><br>

<center><canvas id="canvasBg" width="1000px" height="600px" style=" position:absolute; left: 50; top: 30; z-index: 1; "></canvas></center>

<canvas id="canvasCursor" width="1000px" height="600px"></canvas>
<canvas id="canvas" width="1000px" height="600px"></canvas>


<div id="tabs" style=" position:absolute; left: 1070; top: 30; z-index: 1; ">
<ul>
<li><a href="#tabs-1">Paint</a></li>
<li><a href="#tabs-2">Shapes</a></li>
<li><a href="#tabs-3">Save/Submit</a></li>
<li><a href="#tabs-4">About</a></li>
</ul>
<div id="tabs-1">
<p>Items relating to paint will be stored here</p>
</div>
<div id="tabs-2">
<p>Items relating to shapes will be here</p>
</div>
<div id="tabs-3">
<p>Save your image or submit it to the gallery!</p>
</div>
<div id="tabs-4">
<p>Wayne Daly - 2013</p>
</div>
</div>

</body>



</html>

最佳答案

您只需要一点点 user-select: none :)

编辑:您可以直接将代码添加到 body 并为 #tabs 重新启用:

body {
background:#303030;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}

#tabs {
user-select: text;
-moz-user-select: text;
-webkit-user-select: text;
-ms-user-select: text;
background: #ffffff;
}

关于javascript - 通过离开 Canvas 来突出显示页面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17127984/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com