Wordpress Question posted in
The official Wordpress documentation can be found here.

Toggle CSS onmouseover – WordPress Menu

I have a wordpress menu in which every links a custom class.

Onmouseover, I’d like this class to change the css of another element in the page.

I tried without success:

$('.menuclass').onmouseover(function () {$('.other-element').toggleClass("hover");});

I might go the wrong way about it, do you guys have any idea?

Tags:

2

Answers


  1. 0

    Your jQuery code needs to be modified because jQuery uses the .on("mouseover", function() { … }) event, not .onmouseover.

    The modified code is as follows:

    $('.menuclass').on("mouseover", function () {
    $('.other-element').toggleClass("hover");
});

    This code causes the hover class to be added or removed from the .other-element when the mouse hovers over an element with the menuclass class.

    Also, if you want the hover class to be removed when the mouse is removed from the element, you can use mouseenter and mouseleave :

    $('.menuclass').on("mouseenter", function () {
    $('.other-element').addClass("hover");
}).on("mouseleave", function () {
    $('.other-element').removeClass("hover");
});
    Login or Signup to reply.
  2. 0

    There are several reasons why your jQuery code may not be working in WordPress:

    Loading jQuery in WordPress: Make sure that jQuery is correctly loaded on your WordPress site. By default, jQuery is not loaded in WordPress unless you add it manually. To load jQuery, you can add the following code to the functions.php file:

    function load_jquery() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'load_jquery');

    JavaScript Loading Timing: It’s possible that your code runs before the DOM is fully loaded. To ensure that your code runs after the page is fully loaded, you should use the $(document).ready() event:

    $(document).ready(function() {
    $('.other-element').toggleClass("hover");
});

    Issues with Proper File Loading: Your JavaScript files may not be loading correctly. Check that your JavaScript files are properly linked and are loading on the page. You can use browser developer tools to verify if the JavaScript files are being loaded without errors.

    Caching Mechanism: If you’re using a caching system (like W3 Total Cache or WP Super Cache), the changes might not be immediately visible. Clear your browser cache and the site cache, and then reload the page.

    Theme or Plugin Conflicts: Your WordPress theme or plugins may be interfering with the execution of your JavaScript code. Check if your theme properly uses jQuery and ensure that no code is preventing your jQuery from running.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search