Question

我正在尝试将光标更改为内容可编辑div中特定元素的“指针”。

以下html代码在Internet Explorer 8和9中无法正常工作。
有关如何为可编辑div中的元素设置光标样式的任何想法吗？

<div contenteditable="true">
    <img src="http://images3.wikia.nocookie.net/__cb20100430200315/fantendo/images/0/06/Foo.jpg" style="cursor:pointer"/>
</div>

Answer 1

以下是如何更改contenteditable div的光标（与ꕯ类似的鼠标/文本插入符号的示例，以指示文本编辑和选择是可能的话）。
div还包含继承此设置的子a个链接元素，因此需要明确设置为标准cursor。（该示例包含MDN文档的链接。）

＆＃13;

#edit {
  width:25em;height:4em;
  background-color:#eee;
  border-radius:3px;
  padding:0.2em;
  margin:0.5em;
  
  resize: both;
  overflow: auto;
  
  cursor:text;
  }

#edit a {
  cursor:pointer;
}

＆＃13;

<div id="edit" contenteditable>
Hi, my name is <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"><code>div</code></a> and I'm <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable"><code>contenteditable</code></a>.<br/>
My <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/cursor"><code>cursor</code></a> style is set to <code>text</code>.<br/>
I'm also <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/resize"><code>resizable</code></a> and I <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow"><code>scroll</code></a>!<br/>
So I'm almost like a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea"><code>textarea</code></a>.
</div>

＆＃13;

Answer 2

对于div [contenteditable = true]内部的特定元素更改光标，您需要更改div元素样式。例如

/ *

** 我想更改图像的光标。您只需要指定 cursor：pointer |汽车|元素样式中的文字。

为了实现，我们使用了不同类型的选择器。

* /

  div[contenteditable=true]>img {
      cursor:pointer;
    }


div > img 
{
    cursor:wait;
  
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Stackoverflow</title>
 </head>
<body>
 <div contenteditable="true">
    <img src="http://images3.wikia.nocookie.net/__cb20100430200315/fantendo/images/0/06/Foo.jpg" />
</div>
  <div>
  <img src="http://images3.wikia.nocookie.net/__cb20100430200315/fantendo/images/0/06/Foo.jpg" />
  </div>
    </body>
</html>

Answer 3

          http://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor

               http://www.marcato.org/luke/web/cursors.html
         http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_cursor

更改鼠标指针

加载此页面时，鼠标指针应更改为“手”。自定义光标由“cursor：”样式属性CSS（级联样式表）定义。更改游标类型的最简单方法是在HTML标记中添加style =“cursor：crosshair”属性。 e.g。

文本

以下链接应在“moused-over”后更改指针。它们显示了许多可以使用的内置光标样式：

自动

十字

默认

指针

帮助

移动

文本

等待

NW-调整

正调整大小

NE-调整大小

瓦特调整大小

手

E-调整大小

SW-调整大小

S-调整大小

SE-调整大小

某些光标样式可能不起作用，具体取决于浏览器。自定义鼠标指针

以下HTML代码将显示自定义光标：

文本

自定义URI

用户代理（即浏览器）必须能够处理游标类型。一些可能有效的文件类型是.cur，.csr和.ani文件。上面的示例适用于Internet Explorer for Windows，但不适用于Netscape或IE 5.0 for Unix。

如何更改可编辑div中元素的光标样式

3 个答案: