Question

我有一个用位置设置的图像：固定的CSS属性。我想用鼠标悬停时更改图像源。问题是不仅当鼠标在图像上而且当鼠标进入从x = 0，y = 0到图像本身的不可见方格时，调用悬停功能。

我恐怕不能很清楚，这是一个问题的JSFiddle：http://jsfiddle.net/fz0e8nz9/1/

如果鼠标悬停图像本身，我怎样才能设置更改源？你有什么主意吗？谢谢。

HTML code：

<body>
        <img src="http://www.geekchamp.com/upload/symbolicons/animals/1f424-chicken.png" id="chicken" onmouseover="this.src='http://www.geekchamp.com/upload/symbolicons/animals/1f423-chick.png'" onmouseout="this.src='http://www.geekchamp.com/upload/symbolicons/animals/1f423-chicken.png'"/>
        <img src="http://www.geekchamp.com/upload/symbolicons/animals/1f423-chick.png" id="chick"/>
</body>

CSS代码：

html
{ 
  background: #dddddd;
}

#chicken
{
    position: fixed;
    padding-left: 70%;
    padding-top: 25%;
    width: 15%;
}

#chick
{
    position: fixed;
    padding-left: 65%;
    padding-top: 29%;
    width: 10%;
    visibility: hidden;
}

Answer 1

您可以使用margin代替padding，如下所示：

#chicken
{
    position: fixed;
    margin-left: 70%;
    margin-top: 25%;
    width: 15%;
}

选中 Demo Fiddle

Answer 2

CSS定位接受top -left -bottom -right属性来移动你的项目，试试：

position:fixed
left:70%;
top:25%;
width:auto

将鼠标悬停在位置固定图像上

2 个答案: