jquery 在鼠标输入时设置标签固定位置

91zkwejq 于 2023-06-22 发布在 jQuery

关注(0)|答案(2)|浏览(110)

我试图创建一个简单的圆圈悬停效果，使用jquery，但我在做这个简单的任务的过程中卡住了，问题是，当鼠标到达红色圆圈的标签，这是城市的位置重叠的圆圈区域，和标签周围的圆圈移动，我希望标签是固定的位置上的红色圆圈。当我试着写简短的城市命名标签的描述时，重叠是igonred。例如const regionObject = {"philadelphia" : "Philadelphia",}

$(function(){

   

    $('circle').mouseenter(function(e){

        const circleId = $(this).attr('id');

      
        const regionObject = {
            "philadelphia" : "Philadelphia, sity in pennsylvania",
                    }

        

            var div = $(`<div class="current_region">
            <div class="current_region_box">
            <p>${regionObject[circleId]}</p> 
            </div>
            <div class="region_pointer"></div>
            </div>`)
            .css({
                "display": "block",
                "left": (e.pageX - 40) + 'px',
                "top": (e.pageY - 45) + 'px'
            })
            .appendTo(document.body);

    
    }).mouseout(function(){
    $('body').find('.current_region').remove();
});

    
});

.current_region {
    position: absolute;
  }
  
  .current_region_box {
    position: relative;
    z-index: 10;
    border-radius: 30px;
    background: white;
    box-shadow: 0px 2px 6px 1px rgba(18, 40, 112, 0.5);
    padding: 4px 12px;
  }
  
  .current_region_box p {
    font-family: firagolight;
    font-size: 15px;
  }

  .current_region_box {
    position: relative;
    z-index: 10;
    border-radius: 30px;
    background: white;
    box-shadow: 0px 2px 6px 1px rgba(18, 40, 112, 0.5);
    padding: 4px 12px;
  }
  
  .current_region_box p {
    font-family: firagolight;
    font-size: 15px;
  }

  .region_pointer {
    position: absolute;
    z-index: 9;
    bottom: -9px;
    right: 3px;
    left: 0;
    margin: auto;
    width: 25px;
    height: 25px;
    background: white;
    border-radius: 5px;
    transform: rotate(45deg);
    box-shadow: 0px 0px 4px -1px grey;
  }

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <!-- Font Awesome -->
        <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    
        <!-- Developer CSS -->
        <link rel="stylesheet" type="text/css" href="./map.css">
        <!-- Jquery-->
        <script src="js/jquery-3.4.1.min.js"></script>
        
    </head>
    <body>
        <div class="example" style="text-align: center; padding-top: 50px; cursor: pointer; " >
            <svg height="100" width="100">
                <circle id="philadelphia" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"   />
                Sorry, your browser does not support inline SVG.  
              </svg>
        </div>

        

<!--Boostrap JS-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity=" sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="    sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="./map.js"></script>
</body>
</html>

jquery

来源：https://stackoverflow.com/questions/62816356/set-label-fixed-position-on-mouse-enter

2条答案

按热度按时间

mnemlml81#

你可以使用这个纯CSS解决方案，在这里你使用：：after伪类，当悬停元素时显示。可以按顶部和左侧属性定位工具提示。

body { margin: 50px }
#circle {
  width: 200px;
  height: 200px;
  background-color: red;
  border-radius: 50%;
  position: relative;
  border: 3px solid black;
}

#circle:after {
  content: "This is tooltip";
  position: absolute;
  top: -20px;
  left: 50%;
  display:none;
  
  /* these are just to make it prettier */
  background-color: black;
  padding: 10px;
  color: white;
  border-radius: 5px;
  opacity: .7; /* erase this if you dont want it transparent */
}

#circle:hover:after {
  display: block;
}

<div id="circle"></div>

工具提示的值可以取自circle元素的任何属性，例如title。在CSS中，你可以用途：content: attr(title)

赞(0）回复(0）举报 2023-06-22

eivgtgni2#

使用您的代码，您可能希望获得圆心，并使用cx和cy arttribute来定位标签。
当鼠标触摸标签时，也会出现 Flink 。要解决这个问题，您需要在CSS中添加.current_region{pointer-events:none;}

$(function(){

   

    $('circle').mouseenter(function(e){

        const circleId = $(this).attr('id'); 
        const cx = Number($(this).attr('cx'));
        const cy = Number($(this).attr('cy'));

      
        const regionObject = {
            "philadelphia" : "Philadelphia, sity in pennsylvania",
                    }

        

            var div = $(`<div class="current_region">
            <div class="current_region_box">
            <p>${regionObject[circleId]}</p> 
            </div>
            <div class="region_pointer"></div>
            </div>`)
            .css({
                "display": "block",
                "left": (cx + 40) + 'px',
                "top": (cy - 20) + 'px'
            })
            .appendTo(document.body);

    
    }).mouseout(function(){
    $('body').find('.current_region').remove();
});

    
});

.current_region {
    position: absolute;
  }
  
  .current_region_box {
    position: relative;
    z-index: 10;
    border-radius: 30px;
    background: white;
    box-shadow: 0px 2px 6px 1px rgba(18, 40, 112, 0.5);
    padding: 4px 12px;
  }
  
  .current_region_box p {
    font-family: firagolight;
    font-size: 15px;
  }

  .current_region_box {
    position: relative;
    z-index: 10;
    border-radius: 30px;
    background: white;
    box-shadow: 0px 2px 6px 1px rgba(18, 40, 112, 0.5);
    padding: 4px 12px;
  }
  
  .current_region_box p {
    font-family: firagolight;
    font-size: 15px;
  }

  .region_pointer {
    position: absolute;
    z-index: 9;
    bottom: -9px;
    right: 3px;
    left: 0;
    margin: auto;
    width: 25px;
    height: 25px;
    background: white;
    border-radius: 5px;
    transform: rotate(45deg);
    box-shadow: 0px 0px 4px -1px grey;
  }
  
  .current_region{pointer-events:none;}

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <!-- Font Awesome -->
        <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    
        <!-- Developer CSS -->
        <link rel="stylesheet" type="text/css" href="./map.css">
        <!-- Jquery-->
        <script src="js/jquery-3.4.1.min.js"></script>
        
    </head>
    <body>
        <div class="example" style="text-align: center; padding-top: 50px; cursor: pointer; " >
            <svg height="100" width="100">
                <circle id="philadelphia" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"   />
                Sorry, your browser does not support inline SVG.  
              </svg>
        </div>

        

<!--Boostrap JS-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity=" sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="    sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="./map.js"></script>
</body>
</html>

赞(0）回复(0）举报 2023-06-22

我来回答

jquery 在鼠标输入时设置标签固定位置

2条答案

相关问题

热门标签

最新问答