jQuery 不更新 CSS 属性答案

【问题标题】：jQuery not updating CSS propertiesjQuery 不更新 CSS 属性
【发布时间】：2016-05-02 13:56:50
【问题描述】：

我无法弄清楚为什么 CSS color 和 'text-decoration' 属性没有通过我这里的 'menulight' 函数应用。

当我将鼠标悬停在菜单项上时，'font-weight' 和 'font-family' 工作正常。

为了保持简洁，我删去了其他函数所应用的其余代码。

编辑：添加其余代码

<!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>

【问题讨论】：

你有 jQuery 库吗？
您确定$(this) 指的是一个元素而不是window 对象吗？
是的，我确实包含了一个 jquery 库，这里我将添加整个页面代码，只是为了清楚起见。
除非我遗漏了什么我不确定当 CSS 可以处理:hover、:focus 锚点样式等时是否有必要通过 JS 执行此操作。例如 .event:hover { background: ... } .event:hover .eventDate { }.

标签： javascript jquery html css

【解决方案1】：

这是因为 #menulight a 在 CSS 中的优先级高于类选择器 .menuhover。可以覆盖 font-weight 和 font-family 的事实表明了这一点，因为这些属性没有在具有更高优先级的选择器中声明。你应该改用#menu-main-menu a.menuhover：

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

【讨论】：

课程正在切换，所以我认为这无关紧要？另外，为什么文本装饰不起作用？
我明白你在说什么。谢谢！
这很重要：切换的类被视为与任何类相同，并且将进行标准的 CSS 优先级计算。除非您使用 .css() 覆盖，它会内联编写样式。内联样式的优先级高于样式表中声明的任何属性，除了带有!important 后缀的属性。是否加载了指定锚元素 text-decoration 属性的替代样式表？
啊，好的。如果你不介意的话。我尝试删除 #menu-main-menu a { color: green; } 并留下原始代码，即使没有更高的先例选择器，颜色和文本装饰也不起作用。有什么想法吗？
这可以帮助你：specificity.keegan.st - #menu-main-menu a 有 0-1-0-1 和 .menuhover 有 0-0-1-0，这比第一个要低。