Наведите курсор на изображение - отобразите над ним div - PullRequest
Новая
       4

Наведите курсор на изображение - отобразите над ним div

7 голосов
/ 29 ноября 2010

При наведении курсора я хочу, чтобы ссылка появлялась в правом верхнем углу изображения. Так же, как на вашем профиле в 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;

}

Спасибо!

Ответы [ 5 ]

11 голосов
/ 29 ноября 2010

Вот как я это сделал: 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 .

2 голосов
/ 29 ноября 2010

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

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

2 голосов
/ 29 ноября 2010

Попробуйте 

<!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></p>

<p><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></p>

<p><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></p>

<p></body>
</html>
1 голос
/ 29 ноября 2010

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

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;}
1 голос
/ 29 ноября 2010

сделайте ваше изображение фоном для div с относительным позиционированием и добавьте к нему внутренний div с наложенным стилем контента с помощью display: none

, затем imgdiv: hover innerdiv {display: block} сделает свое дело

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...