Question

我已经尝试了CSS以及通过场景和对象本身设置光标，似乎没有任何工作，它始终会出现光标。

我也不是在谈论插入符号或插入符号位置，我的意思是当你将鼠标悬停在我想要删除或更改为默认指针的TextArea上时的实际鼠标光标。

<!doctype html>
<html lang="en">
<head>
<style>
body {
  margin: 30px;
  font-family: "Georgia", serif;
  line-height: 1.8em;
  color: #333;
}

/* Give headings their own font */

h1, h2, h3, h4 {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

/* Main content area */

#content {
  margin: 80px 70px;
  text-align: center;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}





/* Slots for final card positions */

#tileSlots {
  margin: 50px auto 0 auto;
  background: #ddf;
  color: green;


}

/* The initial pile of unsorted cards */

#tilePile {
  margin: 0 auto;
  background: #ffd;
}

#tileSlots, #tilePile {
  width: 910px;
  height: 120px;
  padding: 20px;
  border: 2px solid #333;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
}

/* Individual cards and slots */

#tileSlots div, #tilePile div {
  float: left;
  width: 150px;
  height: 78px;
  padding: 10px;
  padding-top: 40px;
  padding-bottom: 0;
  border: 2px solid #333;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  margin: 0 0 0 10px;
  background: #fff;
}

#tileSlots div:first-child, #tilePile div:first-child {
  margin-left: 0;
}

#tileSlots div.hovered {
  background: #aaa;
}

#tileSlots div {
  border-style: solid;


}

#tilePile div {
  background: #666;
  color: #fff;
  font-size: 50px;
  text-shadow: 0 0 3px #000;
}

#tilePile div.ui-draggable-dragging {
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
}

/* Individually coloured cards */

#tiles1.correct { background: red; }
#tiles2.correct { background: brown; }
#tiles3.correct { background: orange; }
#tiles4.correct { background: yellow; }
#tiles5.correct { background: green; }


/* "You did it!" message */
#successMessage {
  position: absolute;
  left: 580px;
  top: 250px;
  width: 0;
  height: 0;
  z-index: 100;
  background: #dfd;
  border: 2px solid #333;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  padding: 20px;
}

</style>

<title>A jQuery Drag-and-Drop Number Cards Game</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

<script type="text/javascript">

var correctTiles = 0;
$( init );

function init() {

  // Hide the success message
  $('#successMessage').hide();
  $('#successMessage').css( {
    left: '580px',
    top: '250px',
    width: 0,
    height: 0
  } );

  // Reset the game
  correctCards = 0;
  $('#tilePile').html( '' );
  $('#tileSlots').html( '' );

  // Create the pile of shuffled cards
  var tiles = [ 1, 2, 3, 4, 5];
  tiles.sort( function() { return Math.random() - .1 } );

  for ( var i=0; i<5; i++ ) {
    $('<div>' + tiles[i] + '</div>').data( 'tiles', tiles[i] ).attr( 'id', 'tiles'+tiles[i] ).appendTo( '#tilePile' ).draggable( {
      containment: '#content',
      stack: '#tilePile div',
      cursor: 'move',
      revert: true
    } );
  }

  // Create the card slots

  var tiles = [ 'one', 'two', 'three', 'four', 'five' ];
  for ( var i=1; i<=5; i++ ) {
    $('<div>' + tiles[i-1] + '</div>').data( 'tiles', i ).appendTo( '#tileSlots' ).droppable( {
      accept: '#tilePile div',
      hoverClass: 'hovered',
      drop: handleCardDrop
    } );
  }

}

function handleCardDrop( event, ui ) {
  var slotNumber = $(this).data( 'tiles' );
  var cardNumber = ui.draggable.data( 'tiles' );

  // If the card was dropped to the correct slot,
  // change the card colour, position it directly
  // on top of the slot, and prevent it being dragged
  // again

  if ( slotNumber == cardNumber ) {
    ui.draggable.addClass( 'correct' );
    ui.draggable.draggable( 'correct' );
    $(this).droppable( 'correct' );
    ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
    ui.draggable.draggable( 'option', 'revert', 'invalid' );
    correctCards++;
  } 

  // If all the cards have been placed correctly then display a message
  // and reset the cards for another go

  if ( correctCards == 5 ) {
    $('#successMessage').show();
    $('#successMessage').animate( {
      left: '380px',
      top: '200px',
      width: '400px',
      height: '100px',
      opacity: 1
    } );
  }




}

</script>

</head>
<body>

<div id="content">

  <div id="tilePile"> </div>
  <div id="tileSlots"> </div>

  <div id="successMessage">
    <h2>You did it!</h2>
    <button onclick="init()">Play Again</button>
  </div>

</div>

</body>
</html>

Answer 1

由于文本区域在内部使用滚动窗格，因此鼠标实际上位于滚动窗格的内容之上。所以这有效：

.text-area .content {
    -fx-cursor: default ;
}

如何完全禁用TextArea对象的默认Cursor.TEXT

1 个答案: