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

При наведении курсора я хочу, чтобы в верхней правой части изображения появилась ссылка. Также как на вашем профиле на Facebook, где говорится «Изменить картинку».Наведите указатель мыши на изображение - отобразите над ним

Я попытался заставить его работать с небольшим количеством jquery, но не повезло, так как он не идет справа от изображения. Изображения будут разных размеров, так как они являются изображениями профиля. Поэтому, независимо от размера, он должен оставаться в правом верхнем углу изображения.

JQuery:

$(".imgHover").hover(function() { 
    $(this).children("img").fadeTo(200, 0.25) 
      .end().children(".hover").show(); 
}, function() { 
    $(this).children("img").fadeTo(200, 1) 
      .end().children(".hover").hide(); 
});

HTML:

<div class="imgHover"> 
    <div class="hover"><a href="htpp://google.com">Edit</a></div> 
    <img src="http://img14.imageshack.us/img14/9698/29588166.jpg" alt="" /> 
</div>

CSS:

.imgHover .hover { 
    display: none; 
    position:absolute; 
    z-index: 2; 

}

Спасибо!

источник

2010-11-29 ryryan

Проблема в том, что вы хотите ее в правом верхнем углу или рядом с ней? – 2010-11-29 18:34:06

Это так, как я это сделал: CSS:

.imgHover { 
    display: inline; 
    position: relative; 
} 
.imgHover .hover { 
    display: none; 
    position: absolute; 
    right:0; 
    z-index: 2; 
}

HTML:

<div class="imgHover"> 
<div class="hover"><a href="htpp://google.com">Edit</a></div> 
<img src="http://img14.imageshack.us/img14/9698/29588166.jpg" alt=""> 
</div>

JQuery:

$(function() { 
    $(".imgHover").hover(
     function() { 
      $(this).children("img").fadeTo(200, 0.85).end().children(".hover").show(); 
     }, 
     function() { 
      $(this).children("img").fadeTo(200, 1).end().children(".hover").hide(); 
     }); 
});

Испытание это на jsfiddle.

источник

2010-11-29 20:50:20 ryryan

сделать ваше изображение фоном для DIV с относительным позиционированием и добавить внутренний DIV к нему с содержанием наложения стиль его с дисплеем: нет

затем imgdiv: парить innerdiv {дисплей: блок} будет делать трюк

источник

2010-11-29 18:32:32

Попробуйте

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Test</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
    <style> 
    .imgHover { 
     display: inline; 
     position: relative; 
    } 
    .imgHover .hover { 
     display: none; 
     position: absolute; 
     right: 5px; 
     top: 5px; 
     z-index: 2; 
    } 
    </style> 
</head> 

<body> <script> $(function() { $(".imgHover").hover( function() { $(this).children("img").fadeTo(200, 0.25).end().children(".hover").show(); }, function() { $(this).children("img").fadeTo(200, 1).end().children(".hover").hide(); }); }); </script> 

<div class="imgHover"><div class="hover"><a href="htpp://google.com">Edit</a></div><img src="http://img14.imageshack.us/img14/9698/29588166.jpg" alt=""></div> 

</body> </html>

источник

2010-11-29 18:36:44 simshaun

Спасибо, но ссылка отображается внизу изображения. :/ – ryryan 2010-11-29 19:44:57

Вы что-то изменили или не указали какой-то код, который его меняет. Если вы запустите мой пример автономно, вы увидите, что он работает по назначению (отредактируйте ссылку в правом верхнем углу изображения). – simshaun 2010-11-29 20:47:13

Спасибо за вашу помощь, но это не сработало. В конце концов мне удалось это сделать – ryryan 2010-12-02 13:58:50

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

HTML

<div class="imgHover"> 
    <div class="imgContainer"> 
    <a href="http://google.com">Edit</a> 
    <img src="http://img14.imageshack.us/img14/9698/29588166.jpg" alt="" /> 
    </div> 
</div>

CSS

.imgHover { float: left; } 
.imgContainer { position: relative; } 
.imgContainer a { display: block; position: absolute; top: 0; right: 0; background: Green;}

источник

2010-11-29 18:37:16 Bazzz

Если imgHover сделан, чтобы соответствовать его содержимое, то он должен просто position:relative и класс парения имеют position:absolute и top:0;right:0

Пример: http://www.jsfiddle.net/FvBqA/

источник

2010-11-29 18:39:08

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

ответ

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