отображать значки (или контент) при наведении курсора - PullRequest
Новая
       13

отображать значки (или контент) при наведении курсора

2 голосов
/ 15 мая 2009

В твиттере, когда вы наводите курсор мыши на сообщение, справа появляется значок звездочки и значок ответа.

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

Я хочу, чтобы в моем проекте был аналогичный подход для ручек перетаскивания. Что я могу решить, так это самый эффективный способ достижения этой цели.

каждый раз, когда я наводю указатель мыши на элемент div с идентификатором, я просто внедряю html с помощью .append () или подобным? или мне показать / скрыть уже существующий html .. или есть лучший способ?

Ответы [ 3 ]

5 голосов
/ 15 мая 2009

Самым быстрым решением было бы иметь скрытый блок с ручкой кнопки / перетаскивания, и всякий раз, когда вы наводите курсор мыши на свой элемент, вы .show() делите и размещаете его соответственно (с помощью css)

.append() Использование и удаление html-кода при каждом наведении мыши, безусловно, возможно, но определенно приведет к некоторому снижению производительности.

3 голосов
/ 15 мая 2009

Сделав что-то подобное в последнее время, приведу расширенный пример, если вы хотите протестировать его, вам нужно взять jquery, jquery ui и мой reset.css . При наведении мыши фон и рамка изменяются, и отображаются ранее скрытые значки. 

   <html>
          <head>
              <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
              <link rel="stylesheet" href="css/smoothness/jquery-ui.css" type="text/css" media="screen" />

              <style type="text/css">
                  body {
                      font-family: sans-serif;
                      font-size: 13px;
                  }

                  p {
                      font-size: 1em;
                      line-height: 1.5em;
                      margin-bottom: 15px;
                  }                 
                  #items .item .buttons {
                      width: 16px;
                      display: none;
                      float: right;
                      background: transparant;
                  }

                  #items .item .buttons li {
                      height: 16px;
                      width: 16px;
                      margin: 1px 1px 0px 0px;
                      float:right;
                      cursor: pointer;
                  }         

                  #items .item {
                      width: 400px;
                      margin: 10px;
                      border: 1px dotted #fff;
                  }

                  #items .hover {
                      background: #ffe;
                      border: 1px dotted #ccc;
                  }

                  #items .item .contents {
                      margin: 20px 10px 10px 10px;
                  } 
              </style>

              <script src="js/jquery.js" type="text/javascript"></script>
              <script src="js/jquery-ui.js" type="text/javascript"></script>

              <script type="text/javascript">
                  $(function() {
                      $('#items .item').hover(
                          function() {
                              $(this).addClass('hover');
                              $(this).find('.buttons').show();
                          },
                          function() {
                              $(this).removeClass('hover');
                              $(this).find('.buttons').hide();
                          }
                      );

                      $('#items .item .buttons li').hover(
                          function() {
                              $(this).addClass('ui-state-hover');
                          },
                          function() {
                              $(this).removeClass('ui-state-hover');
                          }
                      );
                  });
              </script>

              <link
          </head>
          <body>
              <div id="items">
                  <div class="item">
                      <ul class="buttons">
                        <li class="delete ui-state-default ui-corner-all">
                          <span class="ui-icon ui-icon-close"/>
                        </li>
                        <li class="config ui-state-default ui-corner-all">
                          <span class="ui-icon ui-icon-wrench"/>
                        </li>
                        <li class="info ui-state-default ui-corner-all">
                          <span class="ui-icon ui-icon-info"/>
                        </li>
                      </ul>
                      <div class='contents'>
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet arcu ante. Suspendisse potenti. Praesent vel nisl urna, eu ultricies risus.</p> 
                          <p>Nulla eget mauris ac lectus tempor consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec et lacus ipsum.</p> 
                          <p>Donec rhoncus tincidunt magna, sit amet placerat nulla fringilla iaculis.</p>
                      </div>
                  </div>

                  <div class="item">
                      <ul class="buttons">
                        <li class="delete ui-state-default ui-corner-all">
                          <span class="ui-icon ui-icon-close"/>
                        </li>
                        <li class="config ui-state-default ui-corner-all">
                          <span class="ui-icon ui-icon-wrench"/>
                        </li>
                        <li class="info ui-state-default ui-corner-all">
                          <span class="ui-icon ui-icon-info"/>
                        </li>
                      </ul>
                      <div class='contents'>
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet arcu ante. Suspendisse potenti. Praesent vel nisl urna, eu ultricies risus.</p> 
                          <p>Nulla eget mauris ac lectus tempor consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec et lacus ipsum.</p> 
                          <p>Donec rhoncus tincidunt magna, sit amet placerat nulla fringilla iaculis.</p>
                      </div>
                  </div>
              </div>
          </body>
      </html>
1 голос
/ 15 мая 2009

Есть лучший способ, если вы хотите отобразить хорошие подсказки - плагин всплывающей подсказки

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

Другим аспектом, который следует учитывать, является постепенное ухудшение - хотите ли вы, чтобы некоторые / аналогичные функции были доступны, если JavaScript отключен или отсутствует?

Если вы проверяете Facebook с помощью плагина Firefox Firebug , вы можете увидеть, что hide div присутствует, когда страница загружена, но скрыта и активирована через CSS классы.

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

Нет похожих вопросов

...