cursor 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>

go如果設置css財產pointer-events:none;那麼你的光標將不會顯示。

解決方案的解釋： 使用jQuery第一p標籤將有cursor:pointer;，如果你點擊然後接下來p標籤將得到cursor:pointer;

更新答案 在這裏，你去了一個解決方案https://jsfiddle.net/3vvLrp75/4/

var clickMethod = function(index){ 
 
\t index++; 
 
\t $('p:nth-child(' + index + ')').next().css({ 
 
    cursor: 'pointer' 
 
    }).bind('click', function(){ 
 
    \t clickMethod(index); 
 
    }); 
 
}; 
 

 
$('p').on('click', function(){ 
 
    var i = $(this).next().index(); 
 
\t $(this).next().css({ 
 
    cursor: 'pointer' 
 
    }).bind('click', function(){ 
 
    \t 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>

希望這會幫助你。