logo标签列表

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

htmlcontenteditablemouse-cursor
6

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

以下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>
为什么 <div> 是 <html> 的直接子元素？ - js-coder
不要认为那是问题所在。无论如何已经编辑过了。 - Use the fork Luke
这显然不是问题。但这样做非常奇怪。 - js-coder
3个回答
0

针对 div[contenteditable=true] 中的特定元素更改光标，您需要更改 div 元素样式。

例如：

/*

** 我想为图像更改光标。 您只需在元素样式中指定 cursor: pointer | auto | text;。

我们使用了不同类型的选择器来实现这一点。

*/

  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>

-1
          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"属性。例如：


文本

以下链接在“悬停”后应更改指针。这些显示了许多内置的光标样式，您可以使用它们：

auto

crosshair

default

pointer

help

move

text

wait

nw-resize

n-resize

ne-resize

w-resize

hand

e-resize

sw-resize

s-resize

se-resize

某些光标样式可能无法正常工作，这取决于浏览器。

自定义鼠标指针

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


文本

自定义URI

用户代理（即浏览器）必须能够处理光标的类型。可能适用的一些文件类型是 .cur、.csr 和 .ani 文件。上述示例在 Windows 的 Internet Explorer 中有效，但在 Netscape 或 Unix 的 IE 5.0 中无效。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接