Currently working on a web app using HTML, CSS, JavaScript, and AngularJS. Progress so far includes a clickable box that triggers a javascript function to display more boxes upon click using ng-click.
<div ng-click="!(clickEnabled)||myFunction(app)" class ="box">
*** content displayed inside the box ***
</div>
The functionality where myFunction() is called based on clickEnabled's value (true or false) works perfectly. The issue arises in the CSS file where the .box class specifies cursor as pointer on hover and changes the background color of the box. Is there a way to maintain cursor: default and prevent background color change when ng-click is disabled or clickEnabled is false?
Sample snippet of the CSS code:
.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;
}
Seeking assistance on how to keep cursor as default when clickEnabled is set to false or ng-click is disabled. Thanks for your help :)