懸停在位置固定圖像

我有一個圖像，我設置了位置：固定的CSS屬性。當我用鼠標將其懸停時，我想更改圖像源。問題是懸停函數不僅在鼠標位於圖像上時調用，而且當鼠標進入從x = 0，y = 0到圖像本身的不可見方格時。懸停在位置固定圖像

恐怕不是很清楚，這裏是問題的一個的jsfiddle：http://jsfiddle.net/fz0e8nz9/1/

如何管理改變只有當鼠標懸停圖像本身的來源？你有什麼主意嗎？謝謝。

HTML代碼：

<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; 
}

來源

2014-09-04 Biloutage

你可以使用margin代替padding這樣的：

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

入住這Demo Fiddle

來源

2014-09-04 22:16:07 DaniP

這正是我一直在尋找。謝謝！ – Biloutage 2014-09-05 09:01:03

CSS定位接受頂 - 左 - 右漢字屬性將你的項目，嘗試：

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

來源

2014-09-04 22:43:20 maioman

懸停在位置固定圖像

回答

相關問題