Question

在Twitter中，当您将鼠标悬停在信息上时，右侧会显示一个星标和一个回复图标。

同样，在Facebook中将鼠标悬停在更新时，右侧会显示一个小“隐藏”图标，同时提供一些上下文菜单。

我想在我的项目中采用类似的方法来实现拖拽和放大掉落手柄。我能决定的是实现这一目标的最有效方式。

是否每次我将鼠标悬停在带有id的div上时，我只是用.append（）或类似的方式注入html吗？或者我是否显示/隐藏现有的html ..还是有更好的方式？

Answer 1

最快的解决方案是使用按钮/拖动手柄设置一个隐藏块，每当你鼠标悬停在你的元素上时，你.show()相应地对它进行div和定位（用css）

.append()在每次鼠标悬停时移除和删除html代码肯定是可能的，但肯定会有一些性能损失。

Answer 2

最近做了类似的事情，这是一个扩展示例，如果你想测试它，你需要抓住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>

Answer 3

如果您想要显示漂亮的工具提示，有更好的方法 - the tooltip plugin

您可以随时将内容附加到DOM，然后在鼠标悬停时删除，这确实有效。我认为这取决于你计划展示的是什么，如果它是图像，那么我会想要在页面加载时隐藏它们然后在悬停时显示但是如果它只是一块文本那么我可能会被诱惑添加到DOM然后在悬停时删除。

要考虑的另一个方面是优雅降级 - 如果JavaScript被禁用或没有，您是否希望某些/类似功能可用？

如果您使用Firefox的Firebug插件检查Facebook，您可以看到隐藏 div在页面加载时存在，但隐藏并激活通过CSS类。

鼠标悬停时显示图标（或内容）

3 个答案: