如果条件为真,则更改悬停属性
Change on hover properties if condition is true
所以我正在使用 HTML、CSS、JavaScript 和 AngularJS 制作网络应用程序。
到目前为止,我有一个盒子,盒子里有一些内容。单击该框时,我调用 javascript 函数来显示更多框,我使用 ng-click 完成了该操作。
<div ng-click="!(clickEnabled)||myFunction(app)" class ="box">
*** things displyaed inside the box ***
</div>
clickEnabled 的值(true 或 false)决定了 myFunction() 是否被调用并且这部分工作完美。当 clickEnabled 为 false 时,ng-click 被禁用。
现在的问题是,在我的 css 文件中,我有我的 .box class 这样当我将鼠标悬停在框上时光标是指针,并且框的背景也会在悬停时发生变化。有没有办法制作 cursor:default 并使其在禁用 ng-click 或 clickEnabled 为 false 时不会更改框的背景颜色?
这是我的 css 代码示例
.box {
border: 1px solid lightgray;
padding: 10px;
border-radius: 5px;
border-color: white;
box-shadow: 0 0 5px gray;
cursor: pointer;
background: #353131;
border-width: 2px;
display: inline-block;
width: 300px;
height: 150px;
}
.box:hover {
background-color: dimgrey;
border-color: grey;
}
同样,当 clickEnabled 为 false/ng-click
为 disabled
时,我不希望光标成为指针。
提前致谢:)
你可以尝试使用ng-class
<div ng-click="!(clickEnabled)||myFunction(app)" ng-class="{no-cursor: !clickEnabled}" class="box" >
*** things displyaed inside the box ***
</div>
.box.no-cursor {
cursor: default;
}
所以我正在使用 HTML、CSS、JavaScript 和 AngularJS 制作网络应用程序。 到目前为止,我有一个盒子,盒子里有一些内容。单击该框时,我调用 javascript 函数来显示更多框,我使用 ng-click 完成了该操作。
<div ng-click="!(clickEnabled)||myFunction(app)" class ="box">
*** things displyaed inside the box ***
</div>
clickEnabled 的值(true 或 false)决定了 myFunction() 是否被调用并且这部分工作完美。当 clickEnabled 为 false 时,ng-click 被禁用。 现在的问题是,在我的 css 文件中,我有我的 .box class 这样当我将鼠标悬停在框上时光标是指针,并且框的背景也会在悬停时发生变化。有没有办法制作 cursor:default 并使其在禁用 ng-click 或 clickEnabled 为 false 时不会更改框的背景颜色?
这是我的 css 代码示例
.box {
border: 1px solid lightgray;
padding: 10px;
border-radius: 5px;
border-color: white;
box-shadow: 0 0 5px gray;
cursor: pointer;
background: #353131;
border-width: 2px;
display: inline-block;
width: 300px;
height: 150px;
}
.box:hover {
background-color: dimgrey;
border-color: grey;
}
同样,当 clickEnabled 为 false/ng-click
为 disabled
时,我不希望光标成为指针。
提前致谢:)
你可以尝试使用ng-class
<div ng-click="!(clickEnabled)||myFunction(app)" ng-class="{no-cursor: !clickEnabled}" class="box" >
*** things displyaed inside the box ***
</div>
.box.no-cursor {
cursor: default;
}