Изменение положения изображения при наведении другого изображения

Question

Изменение положения изображения при наведении другого изображения

0

Я хочу изменить положение изображения, которое отображается во время зависания на другом изображении. Как я могу это сделать... вот мой код http://jsfiddle.net/bulina/aGX5J/1/

<div id="img1">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT5ckS6M6g5q7FgL1dx0gxUFudPbBA46cHUN2JhGUajD_suIOah" onmouseover="this.src='http://motherhoodtalkradio.files.wordpress.com/2010/03/pink-daisy-motherhood-incorporated2.jpg'" onmouseout="this.src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT5ckS6M6g5q7FgL1dx0gxUFudPbBA46cHUN2JhGUajD_suIOah'"/>
</div>

и css:

#img1{
position:absolute;
left:20%;
bottom:50%;    
     }

L11123 21 март 2014, в 14:26

Источник

1

# img1 img: hover {/ * ваша позиция здесь * /}
progysm 21 март 2014, в 12:40

Теги:

html

css

2 ответа

0

Я думаю, что это невозможно с обычным css. Рассмотрите возможность использования javascript или CSS Framework, такого как YAML, чтобы проверить эту страницу, если вам интересно http://www.yaml.de/

Praind 21 март 2014, в 10:41

Ещё вопросы

# img1 img: hover {/ * ваша позиция здесь * /}

Abhishek · Accepted Answer · 2014-03-21T10-26-00.000Z

Не уверен, может быть полезно для вас. Если вы не оживляли переходы - и учитывая виды изображений, которые я сгруппировал в качестве спрайтов, я не знаю, почему вы когда-либо это делали - тогда вам нужно что-то вроде этого:

$(document).ready(function(){
  $('#home a')
    // On mouse over, move the background on hover
   .mouseover(function() {
     $(this).css('backgroundPosition', '0 -54px');
   })
   // On mouse out, move the background back
   .mouseout(function() {
     $(this).css('backgroundPosition', '0 0');
   })
 });

Теперь, если вы пытаетесь оживить это, тогда у вас плохой синтаксис для CSS и для вызовов "оживить".

$(document).ready(function(){
  $('#home a')
   // On mouse over, move the background on hover
   .mouseover(function(){
     $(this).stop().animate({backgroundPosition: "0 -54px"}, 500);
   })
   // On mouse out, move the background back
   .mouseout(function(){
      $(this).stop().animate({backgroundPosition: "0 0"}, 500);
   })
 });

Опять же, я сомневаюсь, что jQuery сможет анимировать "backgroundPosition" для вас, но я не очень часто делаю "animate()", и jQuery всегда удается удивить меня.

здесь страница: http://snook.ca/archives/javascript/jquery-bg-image-animations/