Question

当前的css不适用于光标设置。它只有在我设置

时才有效

游标：不允许;

到.bar类而非特定元素，例如.bar p。我的目标就是每次逐步点击页面时，.bar p cursor设置为指针和点事件为该元素可以点击。这部分确实有效，但我想在开始时所有的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代码将获得cursor:pointer;

更新回答 在这里，您可以使用解决方案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>

希望这会对你有所帮助。

cursor css只处理div名称而不是div

1 个答案: