1. <i id='aORLe'><tr id='aORLe'><dt id='aORLe'><q id='aORLe'><span id='aORLe'><b id='aORLe'><form id='aORLe'><ins id='aORLe'></ins><ul id='aORLe'></ul><sub id='aORLe'></sub></form><legend id='aORLe'></legend><bdo id='aORLe'><pre id='aORLe'><center id='aORLe'></center></pre></bdo></b><th id='aORLe'></th></span></q></dt></tr></i><div id='aORLe'><tfoot id='aORLe'></tfoot><dl id='aORLe'><fieldset id='aORLe'></fieldset></dl></div>

          <bdo id='aORLe'></bdo><ul id='aORLe'></ul>

        <small id='aORLe'></small><noframes id='aORLe'>

      1. <legend id='aORLe'><style id='aORLe'><dir id='aORLe'><q id='aORLe'></q></dir></style></legend>
        <tfoot id='aORLe'></tfoot>

        CSS :hover 仅在鼠标移动时有效

        时间:2023-11-29
      2. <tfoot id='Yt112'></tfoot>

        • <legend id='Yt112'><style id='Yt112'><dir id='Yt112'><q id='Yt112'></q></dir></style></legend>
        • <small id='Yt112'></small><noframes id='Yt112'>

            <bdo id='Yt112'></bdo><ul id='Yt112'></ul>
            <i id='Yt112'><tr id='Yt112'><dt id='Yt112'><q id='Yt112'><span id='Yt112'><b id='Yt112'><form id='Yt112'><ins id='Yt112'></ins><ul id='Yt112'></ul><sub id='Yt112'></sub></form><legend id='Yt112'></legend><bdo id='Yt112'><pre id='Yt112'><center id='Yt112'></center></pre></bdo></b><th id='Yt112'></th></span></q></dt></tr></i><div id='Yt112'><tfoot id='Yt112'></tfoot><dl id='Yt112'><fieldset id='Yt112'></fieldset></dl></div>
                <tbody id='Yt112'></tbody>
                1. 本文介绍了CSS :hover 仅在鼠标移动时有效的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

                  问题描述

                  我创建了一个非常基本的示例:

                  I created a very basic sample:

                  HTML

                  <div id="bla"></div>
                  

                  CSS

                  #bla {
                      width:400px;
                      height:400px;
                      background-color:green;
                      display:none;
                  }
                  
                  #bla:hover{
                     background-color:red;
                  }
                  

                  如您所见,它是一个最初隐藏的 DIV,当鼠标悬停在它上面时会改变颜色.

                  As you can see it's a DIV that is initially hidden and changes color when mouse hovers over it.

                  此 JavaScript 在 2 秒后将其取消隐藏

                  This JavaScript unhides it after 2 seconds

                  setTimeout(function() {
                       document.getElementById('bla').style.display="block";
                  },2000)
                  

                  但是,如果您将鼠标放在 DIV 即将出现的位置上 - 当它出现时 - 它会以未悬停状态出现.只有当您实际移动鼠标时才会发生悬停效果.

                  But if you place your mouse over location where the DIV is about to appear - when it appears - it appears in unhovered state. Only when you actually move the mouse - hover effect takes place.

                  这是一个演示.运行它并立即将鼠标放在结果窗格上.

                  Here's a demo. Run it and immediately place mouse over result pane.

                  这是设计使然吗?有没有办法(最好不使用 JS)来检测 DIV 悬停?

                  Is this by design? Is there a way (without JS preferable) to detect that DIV is hovered?

                  推荐答案

                  虽然你可以使用 opacity,@BrianPhillips 提到,但它在 IE 8 中不起作用.我不知道纯 CSS 解决方案,但这里有一个足够简洁的 Javascript 解决方法:

                  While you can use opacity, @BrianPhillips mentioned, it doesn't work in IE 8. I don't know of a pure CSS solution, but here's a concise enough Javascript workaround:

                  window.onmousemove=function(event){
                      ev = event || window.event;
                      if (event.pageX <= 400 && event.pageY <= 400){
                          document.getElementById('bla').style.backgroundColor= "red";
                      } else {
                          document.getElementById('bla').style.backgroundColor= "green";
                      }
                  }
                  setTimeout(function() {
                       document.getElementById('bla').style.display="block";
                  },2000)
                  

                  演示

                  这篇关于CSS :hover 仅在鼠标移动时有效的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

                  上一篇:字体真棒CSS中的奇怪下划线 下一篇:在悬停时用另一个替换一个 div

                  相关文章

                2. <small id='pA8fy'></small><noframes id='pA8fy'>

                    <bdo id='pA8fy'></bdo><ul id='pA8fy'></ul>

                    1. <i id='pA8fy'><tr id='pA8fy'><dt id='pA8fy'><q id='pA8fy'><span id='pA8fy'><b id='pA8fy'><form id='pA8fy'><ins id='pA8fy'></ins><ul id='pA8fy'></ul><sub id='pA8fy'></sub></form><legend id='pA8fy'></legend><bdo id='pA8fy'><pre id='pA8fy'><center id='pA8fy'></center></pre></bdo></b><th id='pA8fy'></th></span></q></dt></tr></i><div id='pA8fy'><tfoot id='pA8fy'></tfoot><dl id='pA8fy'><fieldset id='pA8fy'></fieldset></dl></div>

                      <tfoot id='pA8fy'></tfoot>
                      <legend id='pA8fy'><style id='pA8fy'><dir id='pA8fy'><q id='pA8fy'></q></dir></style></legend>