Only the cursor CSS is applied to the parent div, not its individual elements within the div

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;

}
jqueryhtmlcss

Answer №1

Check out the solution provided in this link: 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;, your cursor won't be displayed.

Solution Explanation: By using jQuery, the first p tag will have cursor:pointer;, and if clicked, the next p tag will also get cursor:pointer;.

Updated Answer: Here's an updated solution at this link: 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>

This information should assist you further.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The jQuery target is not able to locate the specified element

Why does this code snippet work in one case: jQuery(this).closest("li").find("p").text(); But when enclosed within a function, it fails to produce the desired result: jQuery.each(words, function(i, v) { jQuery(this).closest("li").find("p").text(); } ...

javascriptjquery

Maintaining Object Position in 2D Transforms

I am trying to create multiple perspective-transformed rectangles in the lower right corner of a canvas by using ctx.transform: ctx.transform(1, 0, -1, 1, 10, 10). My goal now is to adjust the size of the drawing based on a variable scale=n, while keeping ...

javascripthtmlcsscanvastransform

The One-Click File Upload Dilemma

I have replaced the regular upload input + submit button with an icon. My goal is to automatically start the upload process when a file is chosen by the user. However, currently nothing happens after the file selection. <form action="upload.php" method ...

javascriptjqueryhtmlfile-upload

Ensuring Proper Tabulator Width Adjustment Across All Browser Zoom Levels

<div id="wormGearTabulatorTable" style="max-height: 100%; max-width: 100%; position: relative;" class="tabulator" role="grid" tabulator-layout="fitDataTable"><div class="tabulator-header" role="rowgroup"><div class="tabulator-header-co ...

javascriptcssangulartypescripttabulator

The contenteditable div's selectAll feature doesn't function properly when it gains focus

I'm working with divs in a table structure and here's an example: <div contenteditable="true" onfocus="document.execCommand('selectAll',false,null)">Something</div> Clicking on a div to focus works perfectly, selectin ...

javascriptjqueryhtmlcss

Include a basic downward-pointing arrow graphic to enhance the drop-down navigation menus

I am working on a website that has drop-down menu headings styled with CSS. I am looking to enhance these certain menu headers by adding small down-facing arrows indicating they are clickable. Does anyone have any suggestions on how I can achieve this? ...

htmlcssuser-interface

"Aligning two images side by side in a horizontal

[enter image description here][1]I am trying to place two images on my website, but I am struggling to vertically align them properly. I have attempted using line-height and vertical alignment, however, I cannot seem to pinpoint the issue or identify any m ...

htmlcss

Filtering and displaying a nested array with underscore, jquery, and handlebars: A guide

I am facing the challenge of filtering specific data from a nested structure: data = { grouplist: [ {name: "one", optionlist: [{optionitem:"green"},{optionitem:"red"}]}, {name: "two", optionlist: [{optionitem:"yellow"},{opt ...

jqueryfilterunderscore.jswhere-clausehandlebars.js

Create a CSS style to set the background with a half height positioned behind the

I am looking to create a div with a background and overlay effect. Here is what I have done so far: I want it to look like this: body { background: blue; } .wrap { height: 300px; width: 600px; margin: 0 auto; background-color: #000000; } .b ...

htmlcss

How to retrieve the selected values of specific option tags using jQuery?

I have a situation where I need to select an option from a dropdown menu. Here is the code for the dropdown: <select id="customUser_id" name="customUser_id"> <option value="2" label="Friends Of Friends">Friends Of Friends</option> &l ...

phpjavascriptjqueryhtml

Browser freezing due to large response when appending data with AJAX

I have been developing an application that retrieves numerous records from a database and displays them in a table. This process involves making an AJAX call and appending the new records to the existing ones. The number of records can vary greatly, rangi ...

javascriptphpjqueryajax

span element failed to trigger onload event

I'm encountering a basic issue with my code as a beginner. Below is the HTML snippet: <!DOCTYPE html> <html> <head> <meta http-equiv='content-type' content='text/html; charset=utf8' /> <scrip ...

javascripthtml

The unique GopikaTwo Gujarati font is unfortunately not compatible with Android mobile browsers and hybrid applications

I am currently trying to incorporate the custom font GopikaTwo into my hybrid application. Below is the code snippet I have added to my CSS file: @font-face { font-family: 'GopikaTwo' !important; src: url('GopikaTwo.eot') !impo ...

androidcssfont-faceandroid-browsercustom-font

Determining the width of an element in terms of percentage

My issue involves input elements with widths set as percentages in CSS under the common class 'display-class' For example: input.test1 { width: 60% } In JavaScript, I am attempting to wrap a div around these input fields with the same width ...

javascriptcssdom

To activate a function, simply click anywhere on the body: instruction

One of my latest projects involved creating a directive that allows users to click on a word and edit it in a text box. Once edited, clicking anywhere on the body should return the word back to its updated form. html <div markdown>bineesh</div& ...

javascripthtmlangularjs

Sending Rails form data to a JavaScript click event

I'm currently working on a user profile form with a "Submit" button that triggers some client-side validations before proceeding. In my code, I've set up an intercepting click event on the submit button to run the validations and then proceed wi ...

javascriptjqueryruby-on-railsajaxforms

Sending information to the styles feature in Angular 2

Is there a way to transfer data from an Angular tag to the styles in the @Component? Take a look at my component: import { Component, Input } from '@angular/core'; @Component({ selector: 'icon', template: `<svg class="icon"> ...

cssangular

Adding turbolinks to an HTML document can be achieved without the need for a

Recently delving into the world of turbolinks, I discovered that it can be employed independently without relying on a client-side javascript framework. Eager to test this out, I created a bootstrap 4 template and attempted to install it. Firstly, I downl ...

javascripthtmlnode.jsbootstrap-4turbolinks

Update the position of the dragged object following the completion of an ajax request

I am currently using jQueryUI drag and drop feature to create a captcha plugin where users drag images into a container, followed by making an AJAX call. I would like to know if it is possible for the positions of the dragged images to be reset once the AJ ...

jqueryajaxjquery-ui

What would be more efficient for designing a webpage - static HTML or static DOM Javascript?

My burning question of the day is: which loads faster, a web page designed from static html like this: <html> <head> <title>Web page</title> </head> <body> <p>Hi community</p> </bo ...

javascripthtmldomcreateelement