Choose an item from a list that does not have a particular class

Question

Choose an item from a list that does not have a particular class

Here is a list of items:

<ul id='myList'>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li class='item-selected'>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
</ul>

I would like to add the class item-over on mouseenter and remove it on

mouseleave for all items except those with the class item-selected.

I have attempted the following:

$('#myList li:not(".item-selected")')
    .mouseenter(function(){ 
         $(this).addClass('item-over'); 
    })
    .mouseleave(function() {
         $(this).removeClass('item-over'); 
    });

However, I have been unsuccessful.

Is there another way to achieve this?

javascript jquery html css

Answer 1

Answer №1

To ensure utmost accuracy, I would implement the function and incorporate the hover feature to enhance user interaction:

$('#myList li').not(".item-selected").hover(
     function(){ 
         $(this).addClass('item-over'); 
     },
     function() {
          $(this).removeClass('item-over'); 
     }
);

Answer 2

To ensure utmost accuracy, I would implement the function and incorporate the hover feature to enhance user interaction:

$('#myList li').not(".item-selected").hover(
     function(){ 
         $(this).addClass('item-over'); 
     },
     function() {
          $(this).removeClass('item-over'); 
     }
);

Answer 3

Answer №2

It appears that the document ready handler was overlooked in your code. Make sure to place it within the document ready block:

$(function(){
    $('#myList li:not(".item-selected")').mouseenter(function(){ 
        $(this).addClass('item-over'); 
    }).mouseleave(function() {
        $(this).removeClass('item-over'); 
    });
});

Answer 4

It appears that the document ready handler was overlooked in your code. Make sure to place it within the document ready block:

$(function(){
    $('#myList li:not(".item-selected")').mouseenter(function(){ 
        $(this).addClass('item-over'); 
    }).mouseleave(function() {
        $(this).removeClass('item-over'); 
    });
});

Answer 5

Answer №3

Your code appears to be in good shape when it comes to handling events.

Check out this example at http://jsfiddle.net/F8rxJ/

This is the code snippet:

$(document).ready(function () {
    $('#myList li:not(".item-selected")').bind('click',function(){
        alert('xxx');            
    });
});

As you can see, the event is triggered successfully.

When implementing this in your actual project, consider using "hover" for the functionality you are aiming for.

Answer 6

Your code appears to be in good shape when it comes to handling events.

Check out this example at http://jsfiddle.net/F8rxJ/

This is the code snippet:

$(document).ready(function () {
    $('#myList li:not(".item-selected")').bind('click',function(){
        alert('xxx');            
    });
});

As you can see, the event is triggered successfully.

When implementing this in your actual project, consider using "hover" for the functionality you are aiming for.

Answer 7

Answer №4

There is a way to achieve this effect without using JavaScript.

#myList li {
    &:hover {
        color: blue;
    }

    &.item-selected,
    &.item-selected:hover {
        color: red;
    }
}

Another method for IE versions 8 and above:

#myList li {
    &:hover:not(.item-selected) {
        color: blue;
    }

    &.item-selected {
        color: red;
    }
}

Answer 8

There is a way to achieve this effect without using JavaScript.

#myList li {
    &:hover {
        color: blue;
    }

    &.item-selected,
    &.item-selected:hover {
        color: red;
    }
}

Another method for IE versions 8 and above:

#myList li {
    &:hover:not(.item-selected) {
        color: blue;
    }

    &.item-selected {
        color: red;
    }
}

Answer 9

Answer №5

Everything is functioning perfectly

$('#listItems li:not(".selected-item")')
    .mouseenter(function(){ 
         if(!$(this).hasClass("selected-item")) // this line has been added
             $(this).addClass('item-hover'); 
    })
    .mouseleave(function() {
         $(this).removeClass('item-hover'); 
    });

Answer 10

Everything is functioning perfectly

$('#listItems li:not(".selected-item")')
    .mouseenter(function(){ 
         if(!$(this).hasClass("selected-item")) // this line has been added
             $(this).addClass('item-hover'); 
    })
    .mouseleave(function() {
         $(this).removeClass('item-hover'); 
    });

Choose an item from a list that does not have a particular class

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

How to style the first dropdown value in AngularJS to appear bold?

Add a new key-value pair to the mock data by clicking on it

Building four frames with HTML

Searching for a way to detect when a user clicks the back button on their Android or iPhone device using JavaScript or

Utilizing JavaScript to assign object properties (column names) from an Array of Objects to a specific row and column header

Guide to adding checkbox IDs and inserting them into a textarea

"Internet Explorer text input detecting a keyboard event triggered by the user typing in a

Tips for defining the width of columns that adapt to different screen sizes in Bootstrap version 4

Instant data entry upon clicking

Ways to align the icon and text to the left side of the screen?

Adjust the path of an element as it decreases in size

Using `preventDefault()` does not stop the action from occurring

Three.js - Optimizing and Handling Images - Best Practices

Ways to implement callbacks within conditional statements?

The TinyMCE editor's input box lost focus while on a popup dialog

Developing a Typescript module, the dependent module is searching for an import within the local directory but encounters an issue - the module cannot be found and

Incorporating Vue into a dated website by eliminating the div and replacing it with new dynamic Vue components

The Power of ReactJS Spread Syntax

Create an HTML selection element based on the value selected in the previous element using jQuery

Switching a conditional className to a styled component