jQuery not updating CSS properties

Question

I am having trouble figuring out why the CSS color and 'text-decoration' properties are not being applied via the 'menulight' function I have here.

The 'font-weight' and 'font-family' are working fine when I hover over the menu items.

I cut out the rest of the code that the other functions are being applied to just to keep this concise.

Edit: Added the rest of the code

<!DOCTYPE html>
<html>
<head>
<title>Meetings &#038; Events | The Landon Hotel</title>
<link rel="stylesheet" href="style/style.css">
<script src="../../jquery-1.11.1.js"></script>
<script type="text/javascript">
    $(function() {
        $("div.event").hover(highlight);
        $("#menu-main-menu a").hover(menulight);
    });
    function highlight(evt) {
        $(this).toggleClass("divhover");
    }
    function menulight(evt) {
        $(this).toggleClass("menuhover");
    }
</script>
    <style type='text/css'>

        .divhover {
            background-color:cornsilk;
        }
        .divhover .eventDate {
            text-decoration: underline;
            font-weight: bold;
            font-family: times new roman;
            color:magenta;
        }
        .menuhover  {
            font-weight: bold;
            color:magenta;
            font-family: cursive;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header"><img src="img/header.png"></div>
        <div id="hero">
            <div class="current"><img src="img/HomePageImages/Paris.jpg"></div>
        </div>
    <nav class="main-navigation" role="navigation">
        <div>
            <ul id="menu-main-menu" class="nav-menu">
                <li><a href="index.html">Home</a></li>
                <li><a href="restaurant-to-room-service.html">Room Service</a></li>
                <li><a href="specials.html">Specials</a></li>
                <li><a href="reservations.html">Reservations</a></li>
                <li><a href="meetings-events.html">Meetings &#038; Events</a></li>
                <li><a href="news.html">News</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>
    </nav>
    <div class="content">

        <h1>Meetings &#038; Events</h1>
        <p>All of the following meetings take place in the Bernal Height Landon Hotel in San Francisco, in their new, state-of the-art conference room.</p>
        <hr/>

        <div class="event">
        <h3>23rd Annual Inventors International Exhibition and Conference:</h3>
        <img width="220px" src="img/inventors_international.jpg"> 
        <ul><li id="eventDate" class="eventDate">Friday, October 31st through Sunday, November 2nd 2014</li></ul>
        <p>The best scientific minds, showing their riveting and forward-thinking inventions, will be in-house for a science and technology-packed weekend. The halls, conference room, and lobby of the Bernal Heights Landon Hotel will be brimming with exhibits, presentations, and demonstrations - providing something for everyone in the family.</p>        
        </div>

        <div class="event">
        <h3>KinetEco, Inc. Solar Seminar:</h3>
        <img class="meeting-right" src="img/solar_conference.jpg"> 
        <ul><li class="eventDate">Friday, November 7th through Sunday, November 9th 2014</li></ul> 
        <p>San Francisco's own KinetEco, Inc. has been a trailblazer in solar energy for the past two decades, and has solarized thousands of businesses and residences throughout the world. Join their talented team of engineers and scientists for this not-to-be-missed event that will explore solar as the must-have energy source of the present and future.</p>
        </div>

        <div class="event">
        <h3>Classic Car Social:</h3> 
        <img class="meeting-left" src="img/classic_car.jpg">
        <ul><li class="eventDate">Tuesday, November 11th through Wednesday, November 12th  2014</li></ul>
        <p>Join other classic car enthusiasts for the monthly classic car social. Bring your car to showcase and share your hobby with others, and enjoy a hearty breakfast buffet. Reservations are required, as parking space is limited for the event.</p>  
        </div>

        <div class="event">
        <h3>Hansel &#038; Petal California Native Gardening Seminar:</h3>
        <img class="meeting-right" src="img/california_natives.jpg">
        <ul><li class="eventDate">Friday, November 21st through Sunday, November 23rd 2014</li></ul>
        <p>With California's current drought situation, never has it been timelier to attend one of Hansel &#038; Petal's informative seminars on native gardening. You'll learn how to select and layout plants for an attractive and drought-resistant landscape. In addition, a tour of some of the best local native gardens will be offered on Saturday morning.</p>
        </div>
    </div>
    </div>
</body>
</html>

Are you sure $(this) refers to an element and not to the window object? — Sebastian Simon
– Sebastian Simon, Commented May 2, 2016 at 5:33
yes I do have a jquery library included, here I will just add the entire page code just for clarity. — Alfonso Giron
– Alfonso Giron, Commented May 2, 2016 at 5:34
Unless I'm missing something I'm not sure it is neccessary to do this via JS when CSS can handle :hover, :focus styles of anchors, etc. e.g .event:hover { background:... } .event:hover .eventDate { }. — Nick Goodrum
– Nick Goodrum, Commented May 2, 2016 at 5:51

Terry · Accepted Answer · 2016-05-02 05:34:39Z

2

That is because #menulight a has a higher precedence in CSS than the class selector .menuhover. The fact that font-weight and font-family can be overridden is indicative of this, as these properties were not declared in the selector with the higher preference. You should use #menu-main-menu a.menuhover instead:

    #menu-main-menu a {
        color: green;
    }
    #menu-main-menu a.menuhover  {
        font-weight: bold;
        color:magenta;
        font-family: cursive;
        text-decoration: underline;
    }

answered May 2, 2016 at 5:34

Terry

66.7k16 gold badges107 silver badges127 bronze badges

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

8 Comments

Alfonso Giron Over a year ago

Well the class is being toggled so I thought that wouldn't matter? Also , why does text-decoration not work?

Alfonso Giron Over a year ago

I see what you're saying I think . Thank you!

Terry Over a year ago

It does matter: a toggled class is being treated the same as any classes, and standard CSS precedence calculation will take place. Unless you are overriding using .css(), which writes the style inline. Inline styles have higher precedence than any properties declared in the stylesheets except those with the !important suffixes. Are there alternative stylesheets loaded specifying the anchor element text-decoration property?

Alfonso Giron Over a year ago

Ah yes okay. And if you don't mind. I tried removing #menu-main-menu a { color: green; } and leaving the original code, and even without that higher precedent selector, the color and text-decoration didnt work. Any idea?

Aziz Over a year ago

This could help you: specificity.keegan.st - #menu-main-menu a has 0-1-0-1 and .menuhover has 0-0-1-0 which is lower specificty than the first.

|

Collectives™ on Stack Overflow

jQuery not updating CSS properties

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related