Question

我有一条直线，在那条线的末尾有点，现在点是隐藏的，我需要做的是如果我的鼠标移动那些点应该是可见的，看起来像事件目标不对隐藏元素起作用，如果我设置为display:block，那么我能够获得其事件目标，任何人都可以帮助我如何解决此问题？这里我添加了我的代码。

＆＃13;

$("#main_div_1").mousemove(function(event) {
  //console.log(event.target);
  if ($(event.target).hasClass('line-circle')) {
    //console.log('On circle');
    $(event.target).show();
  }
});

＆＃13;

#line_1 {
  position: absolute;
  left: 218px;
  top: 211px;
  width: 317px;
  border: 2px solid black;
  height: 0px;
}

.line-circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-size: 50px;
  color: #fff;
  line-height: 5px;
  text-align: center;
  background: grey;
  //red margin-left: -3px !important;
  margin-top: -5px !important;
  z-index: 9999;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="center-div droppable ui-droppable">
  <div class="main_line ui-draggable ui-draggable-handle" data-id="1" style="position:absolute;" id="main_div_1">
    <div style="display: none;
  position: absolute;
  left: 218px;
  top: 211px;
  background: red none repeat scroll 0% 0%;" class="line-circle" id="start_circle_line_1" data-line="horizontal" data-round="top" data-id="1"></div>
    <div class="line line-complete" data-id="1" id="line_1"></div>
    <div style="display: none;
  position: absolute;
  left: 535px;
  top: 211px;
  background: red none repeat scroll 0% 0%;" class="line-circle" id="end_circle_line_1" data-line="horizontal" data-round="bottom" data-id="1"></div>
  </div>
</div>

＆＃13;

Answer 1

$("#main_div_1").mousemove(function(event) {
  $(event.target).parent('.main_line').find(".line-circle").show();  
});

#start_circle_line_1 {
  display: none;
  position: absolute;
  left: 218px;
  top: 211px;
  background: red none repeat scroll 0% 0%;
}

#line_1 {
  position: absolute;
  left: 218px;
  top: 211px;
  width: 317px;
  border: 2px solid black;
  height: 0px;
}

#end_circle_line_1 {
  display: none;
  position: absolute;
  left: 535px;
  top: 211px;
  background: red none repeat scroll 0% 0%;
}

.line-circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-size: 50px;
  color: #fff;
  line-height: 5px;
  text-align: center;
  background: grey;
  //red margin-left: -3px !important;
  margin-top: -5px !important;
  z-index: 9999;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="center-div droppable ui-droppable">
  <div class="main_line ui-draggable ui-draggable-handle" data-id="1" style="position:absolute;" id="main_div_1">
    <div class="line-circle" id="start_circle_line_1" data-line="horizontal" data-round="top" data-id="1"></div>
    <div class="line line-complete" data-id="1" id="line_1"></div>
    <div class="line-circle" id="end_circle_line_1" data-line="horizontal" data-round="bottom" data-id="1"></div>
  </div>
</div>

在event.target中，您将获得没有课程<div class="line line-complete" data-id="1" id="line_1"></div>的{{1}}。

Answer 2

要留下这个答案 https://jsfiddle.net/2jxy9avu/9/

我认为是因为你的div的风格是“display：none;” 你需要以另一种方式做，背景隐藏，然后使用js，在背景颜色或透明

之间随机播放

JS

$(function(){

$("#main_div_1").mousemove(function( event ) {
  if($(event.target).hasClass('line-circle')  ){
    $(event.target).css("background","red");
     $(event.target).mouseout(function(){
       $(event.target).css("background","transparent");
     })
    }
  });
});

HTML

<div class="center-div droppable ui-droppable">
  <div class="main_line ui-draggable ui-draggable-handle" data-id="1" style="position:absolute;" id="main_div_1">
    <div class="line-circle" style="background:transparent; display:block" id="start_circle_line_1" data-line="horizontal" data-round="top" data-id="1">    </div>
<div class="line line-complete" data-id="1" id="line_1"></div>
<div class="line-circle" id="end_circle_line_1" data-line="horizontal" data-round="bottom" data-id="1"></div>

无法在jquery中的mousemove上获取隐藏元素

2 个答案: