Css not changing using jQuery

Question

I have a ul with 2 li's in there, and a local map. if the user hovers on one of the li's the map lights up on of the regions, when the user hovers on one of the regions the corresponding li should light up.

It actually works, but it doesn't work for a 100%, the only one thing that changes is the padding, but the color doesn't change and the list style doesn't change.

<ul>         
<li id="selector1"><a href="#">area 1</a></li>
<li id="selector2"><a href="#">area 2</a></li>
</ul>


$(function() {
    $('#area-1').hover(function() {
        $('#selector-1').css({
            'list-style':'square',
            'padding':'.5em 0',
            'color':'#0a6480',
        });
    }, function() {
        // on mouseout, reset the color
        $('#selector-1').css({
            'list-style':'none',
            'padding':'.2em 0',
            'color':'#FFF'
        });
    });
});

Can you please revise your snippets to help clarify your question? What is #area-1? Are #selector-1 and id="selector1" supposed to be the same (mismatched hyphen)? A working example that demonstrates the issue would be best. — Jonathan Lonowski
– Jonathan Lonowski, Commented Mar 25, 2016 at 23:31

Elvanos · Accepted Answer · 2016-03-25 23:35:41Z

1

Quick answer:

'list-style' is suppsoed on the 'UL' element, 'color' is supposed to go on the 'A' element

Example of code:

<ul>         
<li id="selector1"><a href="#">area 1</a></li>
<li id="selector2"><a href="#">area 2</a></li>
</ul>


$(function() {
    $('#area-1').hover(function() {
        $('#selector-1').css({'padding':'.5em 0'});
        $('#selector-1').closest('ul').css({'list-style':'square'});
        $('#selector-1').find('a').css({'color':'#0a6480'});
    }, function() {
        // on mouseout, reset the color
        $('#selector-1').css({'padding':'.2em 0'});
        $('#selector-1').closest('ul').css({'list-style':'none'});
        $('#selector-1').find('a').css({'color':'#FFF'});            
    });
});

answered Mar 25, 2016 at 23:35

Elvanos

3022 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Przemek Over a year ago

Also, JavaScript contains #selector-1, while in HTML it's #selector1 (hyphen).

tehchriis Over a year ago

Awesome, thank you for your help! EDIT: do you know if it's possible to add transitions in the js?

Swimburger Over a year ago

@tehchriis Here's the animate documentation for jquery.

Kaan Burak Sener · Accepted Answer · 2016-03-25 23:40:33Z

0

Your mistake is that your id is selector1 but you are trying to find selector-1 id element. By the way, I supposed that area-1 is the link inside the first list item:

<ul>
  <li id="selector1"><a id="area-1" href="#">area 1</a></li>
  <li id="selector2"><a href="#">area 2</a></li>
</ul>

Here is the solution: https://jsfiddle.net/g2bynfdg/

answered Mar 25, 2016 at 23:40

Kaan Burak Sener

99410 silver badges19 bronze badges

Comments

Clomp · Accepted Answer · 2016-03-25 23:44:10Z

If you target the selector, then you can use $(this) to work with that DOM node. See this jsfiddle. The area 1 link will change styles when hovering on/off of that link.

HTML

<ul>         
  <li id="selector-1"><a href="#">area 1</a></li>
  <li id="selector-2"><a href="#">area 2</a></li>
</ul>

JQuery

$(function() {
    $('#selector-1').hover(function() {
        $(this).css({
            'list-style':'square',
            'padding':'.5em 0',
            'color':'#0a6480'
        });
    }, function() {
        // on mouseout, reset the color
        $(this).css({
            'list-style':'none',
            'padding':'.2em 0',
            'color':'#FFF'
        });
    });
});

Collectives™ on Stack Overflow

Css not changing using jQuery

3 Answers 3

3 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Related