Question

我无法弄清楚为什么CSS color和＆＃39;文字装饰＆＃39;属性未通过＆＃39; menulight＆＃39;功能我在这里。

＆＃39; font-weight＆＃39;和＆＃39; font-family＆＃39;当我将鼠标悬停在菜单项上时工作正常。

我删除了其他函数正在应用的其余代码，以保持这种简洁。

编辑：添加了其余代码

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

Answer 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;
    }

jQuery没有更新CSS属性

1 个答案: