0

私は奇妙な問題を抱えており、それをうまく説明する方法が本当にわかりません。キャンバスをクリックしてキャンバスの境界の外に移動すると、突然ページ全体が強調表示され、青色で強調表示されます。ハイライトを透明な別の色にしても、これを回避する方法はありますか? または、これを解決するコード、または 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>
4

1 に答える 1

0

必要なのは少しだけです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;
}
于 2013-06-15T21:23:47.213 に答える