cursor css only working on div name and not specific elements within div

Question

The current css doesn't work with the cursor setting. It will only work if I set

cursor:not allowed;

to the .bar class and not specific elements like .bar p. My goal as that on each progressive click on the page, the .bar p cursor gets set to pointer and point-events as the element can be come clickable. This part does work but I would like in the beginning for all of the p elements to have not-allowed as the 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;

}

Answer 1

Here you go with a solution https://jsfiddle.net/3vvLrp75/1/

 $('.bar p').first().css({ 'pointer-events': 'auto', cursor: 'pointer' }); $('p').click(function(){ $(this).next().css({ 'pointer-events': 'auto', cursor: 'pointer' }); }); 

 .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; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="bar"> <p id="income">Income</p> <p id="state">State</p> <p id="rent">Rent</p> <p id="zip">Zip Code</p> <p id="roommate">Room mate</p> </div> 

If you set the css property as pointer-events:none; then your cursor won't be displayed.

Solution explaination: Using jQuery first p tag will have cursor:pointer; , if you click then next p tag will get cursor:pointer;

Updated answer Here you go with a solution https://jsfiddle.net/3vvLrp75/4/

 var clickMethod = function(index){ index++; $('p:nth-child(' + index + ')').next().css({ cursor: 'pointer' }).bind('click', function(){ clickMethod(index); }); }; $('p').on('click', function(){ var i = $(this).next().index(); $(this).next().css({ cursor: 'pointer' }).bind('click', function(){ clickMethod(i); }); }); $('.bar p').first().css({ cursor: 'pointer' }).siblings('p').unbind('click'); 

 .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; cursor: not-allowed; z-index:2; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="bar"> <p id="income">Income</p> <p id="state">State</p> <p id="rent">Rent</p> <p id="zip">Zip Code</p> <p id="roommate">Room mate</p> </div> 

Hope this will help you.