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

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

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

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

ОТВЕТЫ

Ответ 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>

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

<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+. Он отменяет первый стиль, делая кнопки видимыми всегда.

Ответ 2

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

Ответ 3

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

 <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, ссылки все равно будут иметь некоторый смысл.

Ответ 4

Рассмотрим следующий 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 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);