如何将悬停对象锚定在背景图像上

Question

这就是我要编辑的页面

http://coralines.co.vu/

取决于你的屏幕尺寸，当你悬停在猫上时，它的眼睛会闪烁，或者有两个随机的黑点在虚空中盘旋。我想弄清楚的是如何使后者不会发生。我想弄清楚如何使它，当页面的尺寸改变悬停对象停留与猫/背景图像，而不是远离它。从而使闪烁的猫在所有维度的屏幕上都是通用的。

悬停对象

的代码

#cateyes {
  position: fixed;
 margin-top:-280px;
  margin-left:1088px;
opacity:1;

-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#cateyes:hover{
  margin-top:-270px;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  }

这是背景图像 的编码

body{
 background-color: {color:background};
 background-image: url('{image:background}');
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: bottom right;
margin:0px;
color:{color:text};
font-family:times;
font-size:10px;
line-height:100%;
z-index:2;
}

我想也许把猫放在右下角，然后乱搞边距会起作用，但每次我试图做position:bottom right什么都没有发生。任何帮助都将非常感激。

Answer 1

将猫眼从margin-left设置为固定。如果你根据margin-right来定位它们，它应该按照你的要求来做。

如果这不起作用…另一种方法是获取包含猫图像的元素的位置，并将眼睛设置为

position:absolute;

，并使用此代码的变体:

window.onload = categoryButton;
window.onresize = categoryButton;
function categoryButton()
{
    var determineLocation = $('#categoryDiv').position();
    var divWidth = $("#categoryDiv").width();
    $('#addCategoryDiv').css(
    {
        position:'absolute',
        top: determineLocation.top + 'px',
        left: determineLocation.left + divWidth + 'px'
    }
    )
    if(navigator.userAgent.search('Firefox') >= 0)
    {
        $('#addCategoryDiv').css(
        {
            left: determineLocation.left + divWidth - 80 + 'px'
        }
        )
    }
}

其中#addCategoryDiv是你的猫的眼睛，#categoryDiv是你的猫

我以前用过这个代码在一个网站的表单中放置一个表单。如果调整了窗口的大小，它将与你设置的

元素保持一致

上面的代码根据页面上的"categoryDiv"div元素放置了"addCategory"div元素，并且"addCategory"的位置即使在窗口大小调整时也保持固定在"categoryDiv"的位置。

函数的第二部分测试所使用的浏览器是否是Firefox，如果是，则减去80px(这是出于视觉原因)。你可以添加其他浏览器，如果你想，我只需要特定的浏览器为我的项目(了解更多信息:http://www.quirksmode.org/js/detect.html)还有其他的方法来做到这一点。

这是我的工作，希望它能帮助你