The current issue with the CSS is that it doesn't apply to the cursor setting. It only works if I set
cursor:not allowed;
to the .bar class and not specific elements like .bar p. My objective is to have all the p elements initially set to not-allowed as the cursor setting, and then change to pointer on each click to make them clickable. While the functionality works, I would like all p elements to start with the not-allowed cursor setting.
<div class="bar">
<p id="income" onclick="redo(0, this.id)" >Income</p>
<p id="state" onclick="redo(1,this.id)">State</p>
<p id="rent" onclick="redo(2,this.id)">Rent</p>
<p id="zip" onclick="redo(3,this.id)">Zip Code</p>
<p id="roommate" onclick="redo(4,this.id)">Room mate</p>
</div>
.bar {
position: absolute;
height: 20px;
bottom: 70px;
margin: auto;
width: 70%;
margin-left: 15%;
color: green;
}
.bar p{
display: inline;
background-color: transparent;
color: green;
font-size: 16px;
padding: 10px;
margin: 0px auto;
text-align: center;
min-width: 50px;
border: 1px solid green;
z-index: 3;
-webkit-transition: 1s;
transition: 1s;
pointer-events: none;
cursor: not-allowed;
}