Наведите указатель мыши на фиксированное изображение

У меня есть изображение, которое я установил с положением: фиксированный атрибут 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

CSS позиционирование принимает топ -Выберите -bottom -Верно атрибуты, чтобы переместить элемент, попробуйте:

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

источник

2014-09-04 22:43:20 maioman

Наведите указатель мыши на фиксированное изображение

ответ

Смежные вопросы