blocks|key|1557558|text|最快的解决方案是有一个带有按钮/拖动手柄的隐藏块，每当你将鼠标放在你的元素上时，你就会.show()那个div，并相应地定位它(使用css)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1557559|在每次鼠标悬停时.append()'ing和移除html代码当然是可能的，但肯定会对性能造成一些影响。|1557560|entityMap^0|17|7|0|8|9|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

<p>The speediest solution would be to have a hidden  block with the button/drag handle and whenever you mouse-over your element you <code>.show()</code> that div and position it accordingly (with css)</p>

<p><code>.append()</code>'ing and removing html code on each mouse-over is certainly possible but will most definitely have some performance hit.</p>


blocks|key|1557604|text|最近做了这样的事情，这里有一个扩展的例子，如果你想测试它，你需要抓取jquery，jquery+ui和我的reset.css。悬停时，背景和边框会更改，并显示以前隐藏的图标。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1557605|+++<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>|code-block|syntax|javascript|1557606|entityMap|0|LINK|mutability|MUTABLE|url|http://simplicityphp.com/export/f6ef828384025e63841354581d779430099e5c5c/source/lib/simplicity/modules/admin/public/css/reset.css^0|1H|9|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>Having done something like this recently, here is an extended example, if you want to test it you will need to grab jquery, jquery ui and my <a href="http://simplicityphp.com/export/f6ef828384025e63841354581d779430099e5c5c/source/lib/simplicity/modules/admin/public/css/reset.css" rel="nofollow noreferrer" title="reset.css">reset.css</a>.  On hover, the background and border are changed and the previously hidden icons are shown.</p>

<pre><code>   &lt;html&gt;
          &lt;head&gt;
              &lt;link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" /&gt;
              &lt;link rel="stylesheet" href="css/smoothness/jquery-ui.css" type="text/css" media="screen" /&gt;

              &lt;style type="text/css"&gt;
                  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;
                  } 
              &lt;/style&gt;

              &lt;script src="js/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
              &lt;script src="js/jquery-ui.js" type="text/javascript"&gt;&lt;/script&gt;

              &lt;script type="text/javascript"&gt;
                  $(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');
                          }
                      );
                  });
              &lt;/script&gt;

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

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


<p>In twitter, when you hover your mouse over a message a star and a reply icon appears on the right.</p>

<p>Similarly, in facebook when you hover your mouse over to an update, the little 'hide' icon appears on the right also giving a little context menu.</p>

<p>I want to have a similar approach in my project for drag &amp; drop handles. What I can decide is the what the most efficient way is it to accomplish this goal.</p>

<p>is it that everytime I hover the mouse onto a div with an id, do I just inject the html with .append() or similar? or do I show/hide the already existing html.. or is there a better way?</p>


display icons (or content) on mouseover

在twitter中，当你将鼠标悬停在一条消息上时，右边会出现一个星号和一个回复图标。同样，在facebook中，当你将鼠标悬停在更新上时，右侧会出现一个小的“隐藏”图标，同时还会给出一个小的上下文菜单。我想在我的项目中有一个类似的拖放手柄的方法。我能决定的是，实现这个目标最有效的方法是什么。是不是每次我将鼠标悬停在带有...

问鼠标悬停时显示图标(或内容)
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问鼠标悬停时显示图标(或内容)EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问鼠标悬停时显示图标(或内容)
EN