Question

我有一个内圆，它可以跟踪指针的位置，现在，我希望圆的颜色在h2标签上悬停时会改变。

任何人都可以帮忙吗？

我尝试搜索一些地方，但全部都在“鼠标悬停”上。

注意：只有当内圆在h2上悬停而不是鼠标指针移动时，内圆的颜色才应更改。

<!doctype>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Roll Over Eyes</title>
        <style>
            body
            {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 900px;
                border: 1px solid black;
            }
            .main-circle
            {
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                height: 350px;
                width: 350px;
                border: 1px solid black;
                border-radius: 10%;                
            }
            #inner-circle
            {
                position: absolute;
                height: 50px;
                width: 50px;
                border: 1px solid black;
                border-radius: 50%;
                background: #af4b23;
            }
            .message
            {
                display:none;
                width: 75%;
            }
        </style>
    </head>
    <body>
        <div class="main-circle">
            <div id="inner-circle">
            </div>
            <h2 class="message">Your Outside the box</h2>
            <h2 class="message">Your inside the box, now move the mouse to move the circle.</h2>
        </div>
        <script>
            (function()
            {
                var ele= document.getElementById("inner-circle");
                var hea= document.getElementsByClassName("message");                
                var body=document.body;
                var height=body.clientHeight;
                var width=body.clientWidth;
                var move = function(event)
                {
                var x= event.clientX;
                var y= event.clientY;
                ele.style.left = ( x/width )*300;
                ele.style.top = ( y/height )*300;              
                }
                var display = function()
                {
                    console.log("done");
                    hea[0].style.display="inline-block";
                    hea[1].style.display="none";

                }
                var hide = function()
                {
                    console.log("done hiden");
                    hea[0].style.display="none";
                    hea[1].style.display="inline-block";

                }
                var effect = function()
                {
                    ele.style.backgroundColor= "rgba(0,0,0,0.5)";
                }
                var deflt = function()
                {
                    ele.style.backgroundColor= "#af4b23";
                }
                body.addEventListener("mousemove",function(){ move(event) },false);
                body.addEventListener("mouseout",display,false);
                body.addEventListener("mouseover",hide,false); 
                hea[1].addEventListener("mouseover",effect,false); 
                hea[1].addEventListener("mouseout",deflt,false);               

            })();
        </script>
    </body>
</html>

Answer 1

您可以尝试以下方法：

 (function()
          {
              var ele= document.getElementById("inner-circle");
              var hea= document.getElementsByClassName("message");                
              var body=document.body;
              var height=body.clientHeight;
              var width=body.clientWidth;
              var move = function(event)
              {
                var x= event.clientX;
                var y= event.clientY;
                ele.style.left = ( x/width )*300;
                ele.style.top = ( y/height )*300; 
                var e_pos = ele.getBoundingClientRect();
                var h_pos = hea[1].getBoundingClientRect();
                if(e_pos.bottom>=h_pos.top && e_pos.top<=h_pos.bottom && e_pos.right>=h_pos.left && e_pos.left<=h_pos.right){
                  ele.style.backgroundColor= "rgba(0,0,0,0.5)";
                }else{
                  ele.style.backgroundColor= "#af4b23";
                };
              }
              var display = function()
              {
                  //console.log("done");
                  hea[0].style.display="inline-block";
                  hea[1].style.display="none";

              }
              var hide = function()
              {
                  //console.log("done hiden");
                  hea[0].style.display="none";
                  hea[1].style.display="inline-block";
              }

              body.addEventListener("mousemove",function(){ move(event) },false);
              body.addEventListener("mouseout",display,false);
              body.addEventListener("mouseover",hide,false); 
          })();

在此答案中，我在设置background-color的{{1}}和left之后设置了top。我也删除了最后两个ele。

Look at the result online and change it yorself!

添加了边界以检测eventListeners的边界。

跟踪其他元素的位置

1 个答案: