jquery - 游标 css 仅适用于 div 名称，不适用于 div 中的特定元素

Question

当前的 css 不适用于光标设置。只有我设置它才会起作用

光标:不允许；

到 .bar 类而不是像 .bar p 这样的特定元素。我的目标是在页面上的每次渐进式点击时，.bar p 光标设置为指针和点事件该元素可以点击。这部分确实有效，但我希望在开始时所有 p 元素都不允许作为光标设置。

<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

给您一个解决方案 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>

如果您将 css 属性设置为 pointer-events:none; 那么您的光标将不会显示。

解决方案说明: 使用 jQuery 第一个 p 标签会有 cursor:pointer;，如果你点击然后下一个 p 标签会得到 光标:指针；

更新的答案 给你一个解决方案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>

希望对您有所帮助。