Как показать изображения / ссылки на DIV hover?

Question

Как мне добиться такого эффекта, как здесь, на SO, когда вы наводите курсор на комментарий:

• стрелка вверх, чтобы проголосовать
• флаг, чтобы отметить это сообщение
• если вы являетесь автором комментария, у вас также есть возможность удалить

Как сделать так, чтобы ссылки и изображения отображались при наведении курсора на DIV или даже на ячейку таблицы?

Answer 1

Попробуйте это:

.comment .button {
   visibility: hidden;
}  

.comment:hover .button {
   visibility: visible;
}  

Предположим, ваш HTML выглядит примерно так:

<div class="comment">
  <a ...><img class="vote button" ...></a>
  <a ...><img class="flag button" ...></a>
  <a ...><img class="delete button" ...></a>
  <span class="comment-text">...</span>
</div>

---

Эндрю отметил, что это чистое решение CSS не будет работать в IE6. И, как отмечал Ноэль , зависание в мобильных браузерах просто невозможно. Вы можете использовать прогрессивное улучшение, чтобы кнопки всегда были видны в этих случаях.

<style type="text/css" media="screen">

.comment .button {
   visibility: hidden;   
}  

.comment:hover .button {
   visibility: visible;
} 

</style> 


<!--[if lt IE 7]>  
<style type="text/css"> 
.comment .button {
  visibility: visible; 
}   
</style>
<![endif]-->    

IE6 будет понимать первый стиль, делая кнопки скрытыми, но не второй, делая их снова видимыми при наведении курсора. Третий стиль - это условный комментарий , который игнорируются не браузерами IE и IE7 +. Он переопределяет первый стиль, делая кнопки видимыми всегда.

Answer 2

div:hover {
    background-image:url('arrow.gif');
}

Answer 3

Рассмотрим следующий HTML:

<div class="special">
    <div class="links_holder">
        <a class="flag" title="Flag" href="flag.html">Flag</a>
    </div>
    <div class="content">
        Hello, this is my content!
    </div>
</div>

Вы можете использовать следующий CSS, чтобы скрыть ссылки:

div.special div.links_holder {
    float: left;
    width: 16px; /* For a 16x16 link image */
    margin: 0 4px 0 0; padding: 0;
    visibility: hidden;
}

div.links_holder a.flag {
    display: block;
    width: 16px; height: 16px;
    overflow: hidden;

    /* Move the text out of the way 
       It's there for screen readers */
    text-indent: -9999px; 
    background: url('flag.gif') top left no-repeat;
}

div.special:hover div.links_holder {
    visibility: visible;
}

Обратите внимание, что это не будет работать в IE6, поскольку IE6 и ниже поддерживает только псевдотег :hover для тегов <a>. В этом случае вам нужно вернуться к решению JavaScript. Пример с MooTools:

$$('div.links_holder a.flag').each(function(el) {
    el.addEvents({
        'mouseenter': function() {
             el.addClass('hover');
         },
         'mouseleave': function() {
             el.removeClass('hover');
         }
    });
}, this);

Answer 4

Ключ к тому, что вы пытаетесь сделать, - как я думаю, говорят другие ответы, - заключается не в создании контента при наведении курсора, а в том, чтобы сделать его «видимым» при наведении курсора. Он всегда там, просто не так, как пользователь может видеть или взаимодействовать. Таким образом, у вас будет что-то вроде:

 <div class="vote_arrow">
     <a ...>Clicking on me is fun</a>
 </div>

, а затем правило CSS вроде:

 .vote_arrow a {
     display:none;
  }

  .vote_arrow:hover a {
      display: block;
  }

Имейте в виду, однако, что этот метод требует, чтобы у пользователя был включен CSS. Настройте скрытый контент таким образом, чтобы, если у меня отключен CSS, ссылки все равно имели смысл.