色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

在鼠標進入時設置標簽固定位置

CSS
江奕云1年前7瀏覽0評論

我試圖使用jquery在圓圈上創建簡單的懸停效果，但我在做這個簡單任務的過程中遇到了問題，當鼠標到達紅色圓圈時，標簽是城市重疊圓圈區域的位置，標簽在圓圈周圍移動，我希望標簽固定在紅色圓圈的頂部。 頁（page的縮寫）當我試圖寫一個簡短的城市標簽重疊的描述時，我被忽略了。例如 const regionObject = { & quot費城& gt；:& quot費城& gt；,}

$(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"  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <!-- Font Awesome -->
        <link rel="stylesheet" type="text/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>

您可以使用這個純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>

使用您的代碼，您可能希望獲得圓心，并使用cx和cy屬性來定位標簽。

當鼠標接觸標簽時會有閃爍。要解決這個問題，您需要添加。當前區域{指針事件:無；}在CSS中

$(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"  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <!-- Font Awesome -->
        <link rel="stylesheet" type="text/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>