Question

在<body contenteditable="true">时，我需要将鼠标光标设置为指针。由于遗留原因，这需要在Internet Explorer中工作。

a {
  cursor: pointer;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>The HTML5 Cursor Test</title>
</head>

<body contenteditable="true">
  <p>This is Editable editable
    <p>
      <a style="cursor: pointer;" href="https://www.google.com/">I want this 
     link clickable with pointer cursor here</a>
</body>

</html>

这在Chrome浏览器中效果很好，但在Internet Explorer中却无法显示。将鼠标悬停在链接上时，我会在Chrome中看到鼠标指针，但在I.E中看不到鼠标指针。

Answer 1

使用cursor: pointer和cursor: hand覆盖所有浏览器，并使用[contenteditable="true"]标识具有contenteditable属性的元素。

*[contenteditable="true"] {
    cursor: pointer;
    cursor: hand;
}

摘要：

*[contenteditable="true"] {
  cursor: pointer;
  cursor: hand;
}


/* not relevant - styling only */
div {
  height: 75px;
  width: 200px;
  margin-bottom: 10px;
  background-color: firebrick;
  color: #fff;
  font-family: sans-serif;
  text-align: center;
}

<div contenteditable="true">pointer</div>
<div contenteditable="false">default</div>

Answer 2

在contenteditale标记中将false标记为<a>。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body contenteditable="true">
    <p>This is Editable editable<p>
    <a contenteditable="false" style="cursor: pointer;" href="https://www.google.com/">
        I want this link clickable with pointer cursor here
    </a>
</body>

</html>

Answer 3

我认为您应该将CSS设置为内部，并按如下所示进行编辑：

a:hover { cursor:pointer; }

应该可以。

html contenteditable属性

3 个答案: