Question

我有一个奇怪的问题，并不知道如何解释它。当您单击画布并将其移动到画布边界外时，突然它突出显示整个页面并以蓝色突出显示。有没有办法解决这个问题，甚至使高光成为透明的不同颜色？或者一些解决这个问题的代码，甚至是一些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>

Answer 1

您需要的只是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;
}

移动画布突出显示页面？

1 个答案: