Question

我想更改div中所有元素/ div的光标样式，即使一个或多个内部div已经设置了光标的样式：

HTML：

<div id="motherDiv">
  This div has a cursor set to "pointer"
  <div id="subDiv">
    This is the child div
  </div>
</div>

CSS：

#motherDiv {
    background:#f0f;
    padding:20px;
}
#subDiv {
    cursor: default;
    background: gray;
}

JS：

document.getElementById("motherDiv").style.cursor = 'pointer';

https://jsfiddle.net/NguyenVanKhoi/f793vjjs/5/

在JS代码中，光标样式是＆＃34;指针＆＃34;对于外部div。我也希望通过它将它应用于内部div，但它不起作用。光标的内部div样式似乎是固定的（光标：默认），不能更改。

如何使用JS / AngularJS / jQuery为一个父div中包含的所有div更改它？谢谢！

编辑： 我不想在css中修复它，我想将其更改为进度光标，并且可以恢复为motherDiv和sub div的正常。最后，我在CSS中使用它：

.progress {
    cursor: progress;
}
.progress > * {
    pointer-events: none;
}

然后我使用jquery来处理向母亲div添加进度。

Answer 1

简单地通过css：

#motherDiv,
#motherDiv div {
   cursor: pointer;
}

这样，母div和他所有的潜意div将具有cursor: pointer属性。

无论如何，这行代码 document.getElementById("motherDiv").style.cursor = 'pointer';处理角度是一个坏习惯：出于这些目的，您应该使用ng-style或ng-class。

Answer 2

你可以用CSS做到这一点：

#subDiv {
   cursor: pointer;
}

Answer 3

 .cursor {
  cursor: pointer;
 }

这将有所帮助

jQuery('#motherDiv').hover(function () {
  jQuery(this).find('#subDiv').addClass('cursor');
  }, function () {
  jQuery(this).find('#subDiv').removeClass('cursor');
});

Answer 4

你应该给#motherDiv财产cursor: pointer;然后给#subDiv你想要的任何财产...... 然后.....检查我的javascript代码

document.getElementById("motherDiv").className = 'all';

#motherDiv {
    background:#f0f;
    padding:20px;
    cursor:pointer;
}
#subDiv {
  cursor: wait;
    background: gray;
}
#subDiv1 {
  cursor: help;
    background: gray;
}

#subDiv1 {
  cursor: crosshair;
    background: blue;
}
.allDivs  ,#motherDiv div{
  cursor :pointer;
}

<div id="motherDiv">
  This div has a cursor set to "pointer"
  <div id="subDiv">
    This is the child div
  </div> <div id="subDiv1">
    This is the child div
  </div> <div id="subDiv2">
    This is the child div
  </div>
</div>

Answer 5

children（）方法获取selector-tag内的所有标记。选择器是motherdiv。 subDiv在motherDiv中，因此以下内容将css应用于subDiv。

$("#motherDiv").children().css("cursor", "pointer");

Answer 6

使用jQuery：

jQuery('#motherDiv,#motherDiv div').css('cursor','pointer');

＆＃13;

jQuery('#motherDiv,#motherDiv div').css('cursor','pointer');

＆＃13;

#motherDiv {
    background:#f0f;
    padding:20px;
}

#subDiv {
    cursor: default;
    background: gray;
}
#sub-sub-div {
  background:green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="motherDiv">
  This div has a cursor set to "pointer"
  <div id="subDiv">
    This is the child div
    <div id="sub-sub-div">
      THis is grandchild div
    </div>
  </div>
</div>

＆＃13;

或者，使用CSS：

#motherDiv, #motherDiv div {
  cursor:pointer !important;
}

＆＃13;

#motherDiv {
    background:#f0f;
    padding:20px;
}

#subDiv {
    cursor: default;
    background: gray;
}
#sub-sub-div {
  background:green;
}
#motherDiv, #motherDiv div {
  cursor:pointer !important;
}

＆＃13;

<div id="motherDiv">
  This div has a cursor set to "pointer"
  <div id="subDiv">
    This is the child div
    <div id="sub-sub-div">
      THis is grandchild div
    </div>
  </div>
</div>

＆＃13;

如何通过母div的id改变所有内部div的光标样式

6 个答案: