Toggle the class and execute the order within a jQuery script

Question

Toggle the class and execute the order within a jQuery script

When the mouse moves in, the jQuery trigger enters the status.

$(".test").bind("mouseenter mouseout", function(event) {
    $(this).toggleClass("entered");
    alert("mouse position (" + event.pageX + "," + event.pageY + ")");
  });

.entered {
    font-size: 36px;
    width: 200px;
    height: 100px;
    border: 2px solid black;
  }

  .test {
    border: 2px solid red;
    background: #fdd;
    width: 60px;
    height: 60px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <div class="test">please move in</div>

In my code snippet, I discovered two issues:

The entered status only applies font-size: 36px;, why do
```
width: 200px; height: 100px; border: 2px solid black;
```
not take effect?
The alert pops up before $(this).toggleClass("entered"); is completed. How can I ensure that the alert executes after $(this).toggleClass("entered"); has completely finished?

javascript jquery html css

Answer 1

Answer №1

The reason for this issue is selector precedence. The rule .test in the stylesheet overrides the previous styles affecting that element because it is placed last. To resolve this, reorder the rules so that .entered comes after .test.

For a better understanding of CSS selector specificity, refer to this helpful guide on MDN.
The issue arises from alert() blocking the UI thread until dismissed. It is recommended to avoid using alert(). Instead, consider using a setTimeout() to delay the action or replace it with console.log().

Keep in mind that bind() has been deprecated and will be removed from newer versions of jQuery. Switch to using on() as a suitable alternative.

$(".test").on("mouseenter mouseout", function(event) {
  $(this).toggleClass("entered");
  console.log("mouse postion (" + event.pageX + "," + event.pageY + ")");
});

.test {
  border: 2px solid red;
  background-color: #fdd;
  width: 60px;
  height: 60px;
}

.test.entered {
  font-size: 36px;
  width: 200px;
  height: 100px;
  border: 2px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">please move in</div>

Answer 2

The reason for this issue is selector precedence. The rule .test in the stylesheet overrides the previous styles affecting that element because it is placed last. To resolve this, reorder the rules so that .entered comes after .test.

For a better understanding of CSS selector specificity, refer to this helpful guide on MDN.
The issue arises from alert() blocking the UI thread until dismissed. It is recommended to avoid using alert(). Instead, consider using a setTimeout() to delay the action or replace it with console.log().

Keep in mind that bind() has been deprecated and will be removed from newer versions of jQuery. Switch to using on() as a suitable alternative.

$(".test").on("mouseenter mouseout", function(event) {
  $(this).toggleClass("entered");
  console.log("mouse postion (" + event.pageX + "," + event.pageY + ")");
});

.test {
  border: 2px solid red;
  background-color: #fdd;
  width: 60px;
  height: 60px;
}

.test.entered {
  font-size: 36px;
  width: 200px;
  height: 100px;
  border: 2px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">please move in</div>

Toggle the class and execute the order within a jQuery script

Answer №1

Similar questions

The Javascript Node class encountered an error: X has not been defined

Is it permissible to use DEFER or ASYNC when including a stylesheet?

Can the functionality of ngIf and async pipe be replicated within the component's code?

Is there a reason why Social Bar isn't appearing at the top?

"Utilizing jQuery Mobile's Pagebeforeshow event with the advanced functionality of longlist

The content within an iframe is inaccessible through JavaScript when the onload event occurs

How can you retrieve newly added DOM elements from a PartialView using Ajax.BeginForm?

planning to append the author's name to the end of the title using CSS

What is the reason file inputs do not trigger 'input' events, while 'change' events do fire?

Issue with printing data consecutively using Javascript

Ajax returns with a successful response, yet the specified action is never executed

The significance of package-lock.json: Understanding demands vs dependencies

jQuery Validation is not functioning correctly

JavaScript for_each loop

Expanding rows in Angular UI-Grid: Enhancing user experience with hover functionality

Retrieve the username from the database using PHP and then showcase it on the webpage

When previewing a card on Twitter's validator tool, the image displays properly. However, when attempting to share the image on

JavaScript error: forEach is not a function

Issues with Bootstrap's center-block functionality

Uncaught TypeError: Cannot create new instances of User - Node.js server not recognizing User as a constructor