我想要什么

Question

我有一个像

这样的HTML表单

＆＃13;

    #stoppage_section .stoppage{
        cursor: move; /* fallback if grab cursor is unsupported */
        cursor: grab;
        cursor: -moz-grab;
        cursor: -webkit-grab;
    }

＆＃13;

    <div id="stoppage_section">
      <div class="stoppage">
         <input class="form-control" ....>
      </div>
      <div class="stoppage">
         <input class="form-control" ....>
      </div>
    </div>

＆＃13;

当用户在此move区域移动时，我想显示像stoppage_section图标一样的光标。但是当鼠标进入输入字段时，它会正常工作。

此代码在Chrome中正常运行。 但是火狐输入字段不再可写

我想要什么

当鼠标（光标）在div时，它将显示move图标，当鼠标（光标）在输入字段中时，它将正常工作

Mozilla Firefox版本48.0.2。最新版本无法使用我作为Firebug看起来像本地风格，令人作呕

Answer 1

喜欢这个吗？

    .stoppage {
        background-color: #dddddd; /* that you can see the div */
    }

    .stoppage:hover {
        cursor: move; /* fallback if grab cursor is unsupported */
        cursor: grab;
        cursor: -moz-grab;
        cursor: -webkit-grab;
    }

    <div id="stoppage_section">
      <div class="stoppage">
         <input class="form-control" ....>
      </div>
      <div class="stoppage">
         <input class="form-control" ....>
      </div>
    </div>

Answer 2

将鼠标悬停在同一行的文字和外部输入文字上，您可能会看到手形光标。

＆＃13;

    #stoppage_section .stoppage{
        cursor: move; /* fallback if grab cursor is unsupported */
        cursor: grab;
        cursor: -moz-grab;
        cursor: -webkit-grab;
    }

＆＃13;

    <div id="stoppage_section">
      <div class="stoppage">
         Input Text
         <input class="form-control" ....>
      </div>
      <div class="stoppage">
         Input Text
         <input class="form-control" ....>
      </div>
    </div>

＆＃13;

Answer 3

您的代码与我合作正常。如果你想要Mozilla的后备，你可以使用现有的风格添加以下样式：

.stoppage input:hover {
    cursor: edit; //on hovering input box show edit cursor
        }

当光标移动时，firefox表单不起作用

我想要什么

3 个答案: